I’m currently planing a single page web experience consisting of multiple (html-) sections, which are loaded on demand when the user reaches them by scrolling or button interaction.
For non-canvas content (text, images) I therefore simply use a jQuery load() function.
For playcanvas content (assuming I need serveral 3d sections on the page) I now thought of 2 possible strategies:
a) stick with the load() function also for pc sections and load in a html section wich holds a canvas object, scripts … => each 3d section is an individual pc instance
b) handle the individual pc sections as scenes and reposition only one persistent pc canvas within the document and load the sections as individual scenes.
On the first glance b) seems better (as loading and initializing of the pc related code only occurs once), but a) could keep the site slim (by removing the pc instance, if its not need for example). I would really like to hear your thoughts on that. Or are there even other, better solutions?
Hmm, I don’t have much experience in running several instances at once, but your setup reminded me of the official tutorial page, which does something similar. They achieved it via iframes, pointing to the page, containing the application. Perhaps, you could consider it as an option.
Thanks LeXXik.
Yes this is probably the easiest way of doing it. One drawback is, that you can’t really interact out of the iframe back to the container (for example trigger a container event out of the iframe embedded canvas). That let me to the jquery load() way, where you have your canvas within your container dom. But besides that, a good way.
You may also use the browser’s Broadcast Channel API. It allows to communicate between anyone who subscribed to the channel, be it popup, iftrame, parent, etc.
I made a small demo to demonstrate it, based on Playcanvas examples. The example essentially reads the coordinates in one iframe, broadcasts them, and the second iframe uses them to update the view.
// in iframe 1
// the first one to connect, creates the channel
var bc = new BroadcastChannel("myChannel");
bc.postMessage({ x: mouse.x, y: mouse.y });
// in iframe 2
var bc = new BroadcastChannel("myChannel");
bc.onmessage = function(e) {
position.x = e.data.x;
position.y = e.data.y;
};
