React Component for Polygonjs

This is a react component to easily import WebGL scenes created with the node-based editor Polygonjs.

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

Install

yarn add @polygonjs/react

or

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.
• sceneName, which is a string to set the scene name (which is used to find the loading image, if used)

<PolygonjsScene
	sceneName={"scene_01"}
	loadFunction={loadSceneAsync_scene_01}
/>

Once you've saved a scene, you will have a .js file created with a path like ./src/polygonjs/scenes/<sceneName>/autogenerated/loadSceneAsync.js inside your project, which exports a function called loadSceneAsync_<sceneName>.

So assuming you have already created a scene called scene_01 in your project, the file will be ./src/polygonjs/scenes/scene_01/autogenerated/loadSceneAsync.js and the exported function will be called loadSceneAsync_scene_01.

With that in mind, a minimal render function to load a scene will look like this:

import {loadSceneAsync_scene_01} from 'src/polygonjs/scenes/scene_01/autogenerated/loadSceneAsync';

export const MyComponent = () => {
	return <PolygonjsScene
				sceneName={"scene_01"}
				loadFunction={loadSceneAsync_scene_01}
			/>;
};

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 on the scene 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 on the viewer 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) |