Creating a PlayCanvas project for embedding in a React NextJS project

Help & Support
, ,
1

I want to take advantage of the PlayCanvas editor for constructing my scene and creating animations, interactions etc. I also want to self-host the project on a React NextJS project. I will be using GSAP and ScrollTrigger to control my 3D scene. I am tempted to use the PlayCanvas React SDK so I have more control over the components and objects in my scene; but, at the same time, the editor is a great plus. An option is to use the editor as a guide and then translate the 3D properties over to React SDK code.

There is also the issue of NextJS being a server-side-rendering solution, which could be an issue with embedding the PlayCanvas app.

So, I guess, my question is, are there tools for converting the editor stuff into the React SDK code? And, what have others done when they want to incorporate 3D experiences into a web site. Is the PlayCanvas React SDK the best way to do this? Or just use an event system to talk to the PlayCanvas app? How are you handling loading of objects etc.

Are there best practices?

2

I don’t know if this helps, but I’ve been making projects in the Editor and then downloading the JSON file that represents the scene (but downloading a build of my app), giving it to an LLM and asking it to convert it to a PlayCanvas Web Components HTML file. Works very well indeed! Perhaps the same could work for a PlayCanvas React based conversion target too.