Embedding PlayCanvas into a webpage without iframe

In the screenshot, you are missing config.json and actually a few others file :slight_smile:

Here’s an example of a project:

That was a silly mistake on my end. Not sure where those files went when I was transferring everything over haha. Now it still seems like its having some problems finding the config file? Here is the console and the file structure yet again:

I can now see the frame near where its supposed to be though so that’s encouraging!

Okay, I had a proper look at this and it’s going to need a modification to the engine for this scenario to work as the engine assumes it will be in an iframe.

It’s doable with a monkey patch though, it just feels a bit hacky :grimacing:

Is this something yall are planning on being possible in the future with updates to the engine or should I try the hacky way? I have no experience with monkey patches but if you have an idea I’d love to hear it. Otherwise I’ll start taking a whack at it. I’ve just been trying different things within the start.js file up until now

It’s not in the pipeline as this is the first time I remember it being asked for as feature.

This is what I got so far, I’m about to leave for work so I will put this together properly tomorrow

Can I ask what is the reason for not using an iframe?

The reason I ask is because I can’t see where the extra dependencies would be as I’m using the same set of files from the PlayCanvas downloaded build.

Put this together as in, show how to get to what you have there?

The reason is we’re trying to cut down on pulling from other web pages. The pipeline this will end up landing in already relies on so many different things to pull from, I don’t currently have authorization to add more links out of the build instead of just building within the page itself.

Yes, I will do a GitHub repo and you can see the commit changes :slight_smile:

When you say other, do you mean external or just in general? I was thinking the iframe would link to a PlayCanvas build host on the same server/site as the page. Is that not permitted?

Definitely cannot do external, but I believe in general. I’d have to check with my team on that though. We often work in pretty low bandwidth environments so I do wonder if that would impact performance at all (because it’d be an extra call to a server) rather than having it baked into the page.

Thank you so much for all the help man. I look forward to hearing from you tomorrow :slight_smile:

That’s interesting :thinking: Is it the number of network calls or the data size that matters or both in these environments?

The reason I ask is because if the number of networks is more important, we could embed the files/source in base64 URLs. However, that increases the size.

I think it’s both, but data size is more important to us than network calls.

1 Like

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)


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!