Using PlayCanvas for Website Development?

Hey everyone,

Apologies if this is a novice question.

Would this tool be useful for building a semi-interactive 3d environment for a website? I’m impressed by the engine, scalability and ease of use for this software. I would need to create an HTML overlay overtop the 3d environment, and allow it to interact with the environment. We’re building the HTML / 2d environment in Webflow.

We’re looking for the ability to build this (made with ThreeJS): https://cineshader.com/ or this (https://www.gothamsiti.it/)

Thanks so much. Would be excited to use this if it integrates easy and makes sense :slight_smile:

Hi @micahm and welcome,

You can definitely use Playcanvas to add 3D graphics to conventional 2D websites. To build something similar to the ones you posted you will have to get proficient in writing GLSL shaders. Playcanvas provides a very nice shader system that is easy to extend and your own code on top (search for shader chunks system).

Feel free to ask any question you may have in the forums.

Here is an example of such a website using a Playcanvas app in an iframe:

https://difer.es/

1 Like

Thanks for the reply!

That sounds good. So if I’m understanding correctly, it would be fairly straightforward to build the 3D environment in playcanvas?

Is there an easy way to allow the 2d webpage to appear within the 3D environment? Or overlay on top of it? For example, could we use an iframe to put the 2d page “on top of” the 3D environment when a user clicks an object in the environment?

Usually the best way forward is to iframe a Playcanvas build url in your 2D webpage codebase. That way you can easily do development of both sides separately.

To communicate between the two instances you can use the JS postMessage API. You can find more details about it here:

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