Interaction between engine scripts and HTML interface

Hello,
I have a question regarding this project:
https://playcanvas.com/project/523432/overview/stands

We can see there is HTML interface and model are displayed in a single frame/window. This window can be inserted through the “iframe”.
It should looks like:
https://drive.google.com/file/d/1Ni-DDTfAJCvCGTV6ag91PPR0Tv3LjEZa/view?usp=sharing

The task is:
must we separate our interface into a separate iframe so that the UI was on the web page only but our model was displayed from PCanvas? Am I right?
And of course, there should be an interaction between engine scripts and HTML interface.

You can do this multiple ways or a combination of ways

  1. Use the native UI components. This would require some scene setup to get the model to the left of the ‘view’ (either by changing the camera, changing the viewport of the camera, rendering to a texture etc).
  2. Have the PlayCanvas canvas element be ‘full page’ and overlay the HTML UI elements on top of the canvas. This would require some scene setup to get the model to the left of the ‘view’ (either by changing the camera, changing the viewport of the camera, rendering to a texture etc).
  3. Making a custom CSS (you could do this on the preloader, when the app first starts or as a new page) where the canvas is not ‘full page’ but just a part of it and the HTML UI elements are part of the page and not overlaying the canvas. By not using an iframe, you can do things like pc.app.fire("some custom event") to communicate from the HTML UI to the PlayCanvas app.
  4. Having an iframe as part of a page with HTML UI elements in the parent frame. Read this page on how to communicate between the frames: https://developer.playcanvas.com/en/user-manual/publishing/web/communicating-webpage/

Personally, I would go option 1 or option 2 if possible. It’s a simpler workflow and doesn’t really need too much custom work.

Options 3 and 4 require you to create a workflow/build script/pipeline to publish and test. Option 4 is a little easier out of the two as you can just embed the published PlayCanvas hosted build in an iframe on a page that you host yourself.

1 Like

the question is:

what the tariff plan should we select to using the javascript API postMessage for data delivery between my webpage and the PlayCanvas application https://developer.playcanvas.com/en/user-manual/publishing/web/communicating-webpage/ ?

I believe you can do that on a free tier.