Integrate PlayCanvas with React

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:

3 Likes

thank you, i’ll take a look :slight_smile:

1 Like

Hey, do you have any example without typescript?

Sadly no, but if you remove the types from the TS code and adjust the class declaration, it’s common ES6 JavaScript.

Though you shouldn’t be using this code directly but adjust it in your use case.

1 Like

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”.

1 Like

@Helder Hi, so have you successfully implemented react with playcanvas??