https://github.com/polygonjs/polygonjs-react-three-fiber
React Three Fiber component to load scene created with Polygonjs visual editor
https://github.com/polygonjs/polygonjs-react-three-fiber
Last synced: about 1 year ago
JSON representation
React Three Fiber component to load scene created with Polygonjs visual editor
- Host: GitHub
- URL: https://github.com/polygonjs/polygonjs-react-three-fiber
- Owner: polygonjs
- License: mit
- Created: 2022-05-11T14:34:34.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-11-07T23:19:23.000Z (over 2 years ago)
- Last Synced: 2025-03-22T11:24:30.318Z (about 1 year ago)
- Language: TypeScript
- Size: 155 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: MIT-LICENSE
Awesome Lists containing this project
README
Live Demo |
Polygonjs |
Forum |
Discord
# 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](https://polygonjs.com).
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 >>](https://polygonjs.com/react-three-fiber)
# Install
```bash
yarn add @polygonjs/react-three-fiber
```
or
```bash
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](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';
render (
;
)
;
```
# Access the Polygonjs scene
You can update **any node** of the Polygonjs scene by passing props the `` 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:
```
;
```
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`.