Embedding PlayCanvas into a webpage without iframe

Another idea I had would be to use an iframe but inline the PlayCanvas index HTML as a base64 URL. It be slightly bigger in size but I wouldn’t think it be by much given the content of the HTML file.

And after it is gzipped on transport, the size difference is probably very small. This would save the extra network call.

That’s a pretty interesting idea. I think what would work best for our particular use case is attempting to change the engine code to allow everything to be baked directly into the webpage, but if that can’t be done or ends up being impossible to scale I think that idea is certainly worth a shot if the size difference isn’t too bad. I guess we’ll see.

Thanks so much for all the help. Do you work for PlayCanvas? If not they should start compensating you lol

I do an example of both for you tomorrow.

Yep, I’m part of the PlayCanvas support team :sweat_smile:

1 Like

I couldn’t get the base64 iframe version to work. Probably due to it needing external files as well in the HTML.

But here are my changes to make embedding PlayCanvas directly into a canvas/div

Repo: https://github.com/yaustar/playcanvas-embedding-tests
Commit Diff: https://github.com/yaustar/playcanvas-embedding-tests/commit/9fd24541f1d20766015e0860a64057fb8d401025

It’s not thoroughly tested so you may need to fix any issues that you encounter as this is not a supported use case.

Good luck @Jake_Johnson

This is all working beautifully for me thank you so much.

1 Like

Hey there! Thank you for this workaround!
I’ve been trying to implement this using a recent build from PC but there are some changes in .js files. Anything in particular I should pay attention to this time around?

It’s pretty much the same code, just parts have moved around a bit. Using the diff I posted above, I was able to adopt using the new __start__.js file.

The only thing that is really different is that you no longer need the engine patch as long as you set the fill mode in the PlayCanvas project to ‘NONE’

I’ve include the ZIP here to help:
Starter Kit_ Model Viewer.zip (4.3 MB)

2 Likes

Thank you for the fast reply!
I actually got it to work yesterday, the way I wanted to, from your original repo!
The only problems came up from my lack of experience with styling and other front end stuff. Might want to keep separate CSS files for the webpage and playcanvas element instead of having tags all over the place Will try out your updated template too. Thanks again!

2 Likes