{"id":18020044,"url":"https://github.com/polygonjs/polygonjs-react","last_synced_at":"2025-08-20T00:08:58.811Z","repository":{"id":109050828,"uuid":"488175095","full_name":"polygonjs/polygonjs-react","owner":"polygonjs","description":"React component to easily load Polygonjs WebGL scenes","archived":false,"fork":false,"pushed_at":"2022-12-19T12:39:12.000Z","size":75,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-22T11:24:34.418Z","etag":null,"topics":["3d","animation","creative-coding","glsl","particles","procedural","procedural-generation","react","reactjs","threejs","visual-editor","visualization","webgl"],"latest_commit_sha":null,"homepage":"https://polygonjs.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/polygonjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-05-03T11:05:59.000Z","updated_at":"2024-06-04T14:57:26.000Z","dependencies_parsed_at":"2023-09-22T22:01:26.468Z","dependency_job_id":null,"html_url":"https://github.com/polygonjs/polygonjs-react","commit_stats":{"total_commits":19,"total_committers":1,"mean_commits":19.0,"dds":0.0,"last_synced_commit":"51fc2ab368113efc8352234c5d16876852cf1e02"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/polygonjs","download_url":"https://codeload.github.com/polygonjs/polygonjs-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245731530,"owners_count":20663202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","animation","creative-coding","glsl","particles","procedural","procedural-generation","react","reactjs","threejs","visual-editor","visualization","webgl"],"created_at":"2024-10-30T05:13:23.864Z","updated_at":"2025-03-26T20:31:38.166Z","avatar_url":"https://github.com/polygonjs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/polygonjs/polygonjs-assets/blob/master/tutorials/react/logos.png?raw=true\" alt=\"React + Polygonjs\"\u003e\u003c/img\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://polygonjs.com/react\"\u003eLive Demo\u003c/a\u003e |\n\u003ca href=\"https://polygonjs.com\"\u003ePolygonjs\u003c/a\u003e |\n\u003ca href=\"https://polygonjs.com/forum\"\u003eForum\u003c/a\u003e |\n\u003ca href=\"https://polygonjs.com/discord\"\u003eDiscord\u003c/a\u003e\n\u003c/p\u003e\n\n# React Component for Polygonjs\n\nThis is a react component to easily import WebGL scenes created with the node-based editor [Polygonjs](https://polygonjs.com).\n\nPolygonjs 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.\n\n\u003ctable style=\"margin:0px;padding:0px\"\u003e\n\t\u003ctr style=\"margin:0px;padding:0px\"\u003e\n\t\t\u003ctd style=\"margin:0px;padding:0px\"\u003e\u003cimg src=\"https://github.com/polygonjs/polygonjs-assets/blob/master/tutorials/react/scene_01.gif?raw=true\"\u003e\u003c/img\u003e\u003c/td\u003e\n\t\t\u003ctd style=\"margin:0px;padding:0px\"\u003e\u003cimg src=\"https://github.com/polygonjs/polygonjs-assets/blob/master/tutorials/react/scene_02.gif?raw=true\"\u003e\u003c/img\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr style=\"margin:0px;padding:0px\"\u003e\n\t\t\u003ctd style=\"margin:0px;padding:0px\"\u003e\u003cimg src=\"https://github.com/polygonjs/polygonjs-assets/blob/master/tutorials/react/scene_03.gif?raw=true\"\u003e\u003c/img\u003e\u003c/td\u003e\n\t\t\u003ctd style=\"margin:0px;padding:0px\"\u003e\u003cimg src=\"https://github.com/polygonjs/polygonjs-assets/blob/master/tutorials/react/react_example.gif?raw=true\"\u003e\u003c/img\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\u003c/table\u003e\n\n[Live Demo \u003e\u003e](https://polygonjs.com/react)\n\n# Install\n\n```bash\nyarn add @polygonjs/react\n```\n\nor\n\n```bash\nnpm install @polygonjs/react\n```\n\n# How to use\n\nThe only 2 required properties to give to the component are:\n\n-   `loadFunction`, which is the function that loads your 3D scene. That function is autogenerated by [polygonjs visual editor](https://polygonjs.com/docs/getting_started).\n-   `sceneName`, which is a string to set the scene name (which is used to find the loading image, if used)\n\n```tsx\n\u003cPolygonjsScene\n\tsceneName={\"scene_01\"}\n\tloadFunction={loadScene_scene_01}\n/\u003e\n```\n\nOnce you've saved a scene, you will have a .js file created with a path like `./src/polygonjs/scenes/\u003csceneName\u003e/autogenerated/loadScene.js` inside your project, which exports a function called `loadScene_\u003csceneName\u003e`.\n\nSo 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`.\n\nWith that in mind, a minimal render function to load a scene will look like this:\n\n```ts\nimport {loadScene_scene_01} from 'src/polygonjs/scenes/scene_01/autogenerated/loadScene';\n\nexport const MyComponent = () =\u003e {\n\treturn \u003cPolygonjsScene\n\t\t\t\tsceneName={\"scene_01\"}\n\t\t\t\tloadFunction={loadScene_scene_01}\n\t\t\t/\u003e;\n};\n```\n\nThis will load your scene asynchronously. This means that the rest of the page will load first, and then the 3D scene will be loaded.\n\n# Other Properties\n\n\n| name | type | description |\n| ---- | ---- | ----------- |\n| **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`) |\n| **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`) |\n| **posterUrl** | _string_ | Overrides the default poster url. |\n| **onProgress** | _function_ | This function is called when the loading progress is updated. |\n| **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. |\n| **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. |\n| **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`) |\n| **loadScene** | _boolean_ | defines if the scene is loaded or not when the component is mounted. (default: `true`) |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolygonjs%2Fpolygonjs-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolygonjs%2Fpolygonjs-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolygonjs%2Fpolygonjs-react/lists"}