[SOLVED] PlayCanvas within a div?

Trying to determine if Playcanvas is the right framework for a project. This is for a technical training application.

Imagine a web-based application that simulates a CNC machine. You can control the machine within the graphical application by pressing buttons, etc. However, we need to also be able to have the ability to have the user type G-code and other text commands into a textbox that would simulate a text-based programming interface for the CNC machine. A set of buttons would send the code to the simulated machine and the machine would execute the code.

Can a Playcanvas application exist within a page where it runs in a div and other divs have controls of various kinds that communicate with the application and control it?

EDIT: Forgot to mention that I also need communications to go in the other direction. I need data from the Playcanvas app to be available to the outer page.

Absolutely. Playcanvas runs in the canvas element. You can adapt its size to fit into your page or embed it into other elements, such as a div. Since it is javascript based, you can control the whole document and its contents. You can create a user interface in a classical way by creating html elements within a playcanvas script and appending these to the DOM, or you could (if needed) create an interface that gets rendered within the 3D scene. For communications you can use events or exchange data between playcanvas objects by accessing their entities via app.root. (please correct me if I’m wrong)

Does this help:

https://developer.playcanvas.com/en/user-manual/publishing/web/communicating-webpage/

Thanks for the replies. It sounds like I should give Playcanvas a try then. The main site is Python/Django and I need the interactive content to appear seemlessly on one of the pages, along with controls that appear to belong to the overall design.

Would I have to self-host to have this degree of control? From what I read it sounds like I need to serve the Playcanvas code from my the same server that hosts the rest of the site rather than using the Playcanvas cloud servers.

I would probably recommend serving the entire application (PlayCanvas app + surrounding page) from the same server. One reason for this is that the playcanv.as domain does not (currently) use a CDN which you would probably want to consider for your app.

As long as the server is configured to allow iframing, you’re fine. playcanv.as allows iframing, launch.playcanvas.com (the URL for your app when launched directly from the Editor) does not. So I believe you could use a normally published PlayCanvas app on your site and communicate with it from a page you host, but like I say, you probably ought to just serve everything yourself anyway, so you have full control.

Thanks. I think I’ll build and test as much as possible on the playcanvas servers just so I can get going and learn the framework. When the time comes for interaction with the website proper I can then learn about self hosting and all that goes with that.

I now have a plan. Thanks.

2 Likes