Communicate with Playcanvas via GET, pass arguments etc

Help & Support
1

Hi,

Just thinking out loud here before going into a large production. Is there a way to communicate with a playcanvas app via URL link. Let’s say I wanted to load a certain scene or pass on a flag/argument/parameter that would change something dynamically in my scene, could I do that via a link / GET URL ?

Regards

Björn

2

Hi,

I’m not sure about what you want exactly. But yes, you should be able to get parameters from an URL using basic Javascript. The problem is that you don’t want to reload your Playcanvas project each time the URL change.

What I do to send basic data to Playcanvas is using postMessage to send data to my iframe with my canvas inside of it. So, I can have an HTML website with buttons that can change the content of my Playcanvas project.

Here

//HTML Page:
iframeWin = document.getElementById("playcanvas_iframe").contentWindow;
iframeWin.postMessage({ cmd: 'setCubeToRed'}, "*");

//In my Playcanvas project
if (window.addEventListener) {
	// For standards-compliant web browsers
	window.addEventListener("message", receiveDataFromWebsite, false);
}
else 
{
	window.attachEvent("onmessage", receiveDataFromWebsite);
}

function receiveDataFromWebsite(evt)
{   
        //Safety check
	if (evt.origin == "https://www.myWebsite.com") {
               var command_received = evt.data.cmd;
               ....
	}
}

Another way I do to exchange data with my Playcanvas project is by combining it with a Restful API using Node.JS.

1 Like
3

aha, interesting. That’s a possibility. Now I was mostly thinking about if I wanted to access my playcanvas app (residing and hosted locally on it’s own page) from two different parts of larger site. Perhaps one of the links to the playcanvas page want’s to access a certain part of the app, but the other link is after something else. Two different camera position/zoom levels, or loading two separate scenes. Or perhaps, passing on a variable saying which country the user is in - then dynamically replacing it with a 3D model of that flag of the country somehere in the 3D models.

Buy perhaps I should be thinking more like this: The page where the webgl app is placed and loaded has a script responsible for reading URL/GET parameters, then communicates with the app depending on what it gets.

4

Hi @bjorn.syse,

If your Playcanvas app is hosted as an iframe in your parent website, you can use the Javascript postMessage API to easily communicate both ways:

5

Thanks, it’s not. It’s embedded and loaded from the same domain.

6

Then if everything is running on the same window object, you can easily get an instance of the Playcanvas app and fire pc.Events to communicate:

const app = pc.Application.getApplication();
app.fire('open:menu');
7

ok, great. So by using this technique: https://gomakethings.com/getting-all-query-string-values-from-a-url-with-vanilla-js/#:~:text=First%2C%20we%20set%20up%20an,grab%20the%20search%20portion%20(ie. and then making up a couple of keywords to pass on, I can then pull those in Javascript and fire events directly to the application - that in turn can be listedned to and reacted to. So the camera could move or something else could happen then?

8

Mmm, I am hesitant to say yes since I am bit confused on how you have your code/sites structured. Could you elaborate on that a bit more?

9

I understand! This is all hypothetically as of now. (and I’m rusty on my web app programming).

Perhaps I can think like this: If I access the window.location.href attribute from within a script in playcanvas. Then I can react to any made up parameters like this:

https://domain.com/pagewithembeddedplaycanvasapp?flagcolor=red&showwelcomemsg=false';
10

Oh that, yes definitely, Playcanvas doesn’t do anything special on that aspect. As any regular web app you can read all query params and act on them in your Playcanvas scripts.

1 Like
11

That’s what I figured, but my experience is so limited on this I just wanted to confirm that. Thanks a bunch for a quick answer!

2 Likes