Hi, i have a React UI and i need integrate with a playcanvas project, i tryed use the engine but i dont have success. Anyone know how i can integrate?
Hi @Helder and welcome,
There are several ways you can do this:
- if you are working directly with engine, Playcanvas can be loaded using NPM as a module
- if you are planning in adding React on top of a Playcanvas editor project, my preferred approach is to iframe the Playcanvas instance and use window.postMessage() to communicate between Playcanvas <-> React.
Here is a helpful post with example code for the iframe solution:
thank you, i’ll take a look
Hey, do you have any example without typescript?
Though you shouldn’t be using this code directly but adjust it in your use case.
no problem, another question, how i can execute functions of my scripts in playcanvas in my React UI?
If you are using the parent to iframe approach you communicate between react and Playcanvas using messages.
So you listen for messages and then execute the relevant method.
We’ve integrated PC both in backside and frontside.
Here an example (click on 3D button): https://www.casahomewear.com/collections/copriletto-trapuntato/products/qulit-elicriso.
On the backend we’ve built a Shopify App in NextJS-Koa-GraphQL where backend interface integrate a PC iframe area that send and receive commands via “messages”.
@Helder Hi, so have you successfully implemented react with playcanvas??