https://github.com/polygonjs/polygonjs-react

React component to easily load Polygonjs WebGL scenes
https://github.com/polygonjs/polygonjs-react

3d animation creative-coding glsl particles procedural procedural-generation react reactjs threejs visual-editor visualization webgl

Last synced: 21 days ago
JSON representation

React component to easily load Polygonjs WebGL scenes

• Host: GitHub
• URL: https://github.com/polygonjs/polygonjs-react
• Owner: polygonjs
• License: mit
• Created: 2022-05-03T11:05:59.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-19T12:39:12.000Z (almost 2 years ago)
• Last Synced: 2024-04-17T22:14:51.517Z (7 months ago)
• Topics: 3d, animation, creative-coding, glsl, particles, procedural, procedural-generation, react, reactjs, threejs, visual-editor, visualization, webgl
• Language: TypeScript
• Homepage: https://polygonjs.com
• Size: 73.2 KB
• Stars: 5
• 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 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`) |