React Three Fiber Component for Polygonjs

This is a react three fiber 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 three fiber, and benefit from its reactive states. You can then update the 3D scene from anything in your react three fiber setup.

Live Demo >>

Install

yarn add @polygonjs/react-three-fiber

or

npm install @polygonjs/react-three-fiber

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={loadScene_scene_01} />

Once you've saved a scene, you will have a .js file created with a path like ./src/polygonjs/scenes/<sceneName>/autogenerated/loadScene.js inside your project, which exports a function called loadScene_<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/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:

import {loadScene_scene_01} from 'src/polygonjs/scenes/scene_01/autogenerated/loadScene';

render (
	<Canvas>
		<PolygonjsScene
			sceneName={"scene_01"}
			loadFunction={loadScene_scene_01} />;
	</Canvas>
)
;

Access the Polygonjs scene

You can update any node of the Polygonjs scene by passing props the <PolygonjsScene/> component.

The name of the prop must match the path of the parameter, which you can get by right-clicking on the parameter label.

And the path is path-to-node--paramname. So you should replace the forward slashes (/) by a dash (-), and have 2 dashes (--) separating the node path and the param name.

So the param /geo1/text1/text (meaning the param test of the node text1 which itself is inside the node geo1) is accessed by the prop geo1-text1--text.

In JSX, you can therefore set it like this:

<PolygonjsScene
	sceneName={"scene_01"}
	loadFunction={loadScene_scene_01}
	geo1-text1--text={'my new string'}
/>;

And you can also access parameter components (for vector or color parameters) by adding the name of the component. For instance, the x component of the translate param is accessed via geo1--t-x.