I’ve got an issue with publishing my PlayCanvas apps on a website. These website will contain ui elements to control the PlayCanvas apps.
- I want to publish the PC app (canvas) in a specific div. How to do that?
- My website must contain muliple (two) PlayCanvas application (yes, this is necessary). Like for the first one, there is a div container where it should be loaded.
- I need access to both application to fire events to them like in the example below or in any other way:
`
btn_doSomething.addEventListener('click', function() {
app1.fire("DoSomething", "Value");
app2.fire("DoSomethingElse", "Value");
});
I've found a solution that works for me. I've published a website with two PlayCanvas "Apps" on it and interacting via script with both of them. The solution recommend to keep the PlayCanvas applications in an
iframe
. So you can host the app yourself or let PlayCanvas do this for you. Another advantage is that you don't have to change anything in our exported project.So the HTML part is very simple:
In a JavaScript I get the apps from both
iframes
and save them in a variable:Now you've got access to the app and you can run all functions. For me, I'm firing events to my scripts. Keep in mind that you have to create the listeners for them in your PlayCanvas app.
And that's it! Very simple and very flexible in my opinion!