Live Demo |
Polygonjs |
Forum |
Discord
# React Component for Polygonjs
This is a react component to easily import WebGL scenes created with the node-based editor [Polygonjs](https://polygonjs.com).
Polygonjs allows you to create complex and procedural scenes with a visual editor, and you can import them with react, and benefit from its reactive states. You can then update the 3D scene from anything in your react setup.
[Live Demo >>](https://polygonjs.com/react)
# Install
```bash
yarn add @polygonjs/react
```
or
```bash
npm install @polygonjs/react
```
# How to use
The only 2 required properties to give to the component are:
- `loadFunction`, which is the function that loads your 3D scene. That function is autogenerated by [polygonjs visual editor](https://polygonjs.com/docs/getting_started).
- `sceneName`, which is a string to set the scene name (which is used to find the loading image, if used)
```tsx
```
Once you've saved a scene, you will have a .js file created with a path like `./src/polygonjs/scenes//autogenerated/loadScene.js` inside your project, which exports a function called `loadScene_`.
So assuming you have already created a scene called `scene_01` in your project, the file will be `./src/polygonjs/scenes/scene_01/autogenerated/loadScene.js` and the exported function will be called `loadScene_scene_01`.
With that in mind, a minimal render function to load a scene will look like this:
```ts
import {loadScene_scene_01} from 'src/polygonjs/scenes/scene_01/autogenerated/loadScene';
export const MyComponent = () => {
return ;
};
```
This will load your scene asynchronously. This means that the rest of the page will load first, and then the 3D scene will be loaded.
# Other Properties
| name | type | description |
| ---- | ---- | ----------- |
| **displayLoadingProgressBar** | _boolean_ | While the scene is being loaded, a progress bar is updated to reflect the progress. This can be turned off by passing `false` (default: `true`) |
| **displayLoadingPoster** | _boolean_ | While the scene is being loaded, a loading image (or poster) is displayed as a placeholder. The default url of the poster resolves to the location where the editor saves the images screenshot from the viewer (which you can capture yourself using the button with a photo icon). This can be turned off by passing `false` (default: `true`) |
| **posterUrl** | _string_ | Overrides the default poster url. |
| **onProgress** | _function_ | This function is called when the loading progress is updated. |
| **onSceneReady** | _function_ | This function is called when the scene is loaded. The scene is given as the first argument. You can then use [Polygonjs API](https://polygonjs.com/api) on the [scene](https://polygonjs.com/docs/api/PolyScene) to update it as you need. |
| **onViewerReady** | _function_ | This function is called when the viewer is loaded. The viewer is given as the first argument. You can then use [Polygonjs API](https://polygonjs.com/api) on the [viewer](https://polygonjs.com/docs/api/TypedViewer) to update it as you need. |
| **render** | _boolean_ | Pauses the rendering when `false`. This can be useful to disable rendering when the component is either not visible, or when you know nothing has changed (default: `true`) |
| **loadScene** | _boolean_ | defines if the scene is loaded or not when the component is mounted. (default: `true`) |
