{"id":18020041,"url":"https://github.com/polygonjs/polygonjs-react-three-fiber","last_synced_at":"2025-03-26T20:31:39.003Z","repository":{"id":109051038,"uuid":"491148815","full_name":"polygonjs/polygonjs-react-three-fiber","owner":"polygonjs","description":"React Three Fiber component to load scene created with Polygonjs visual editor","archived":false,"fork":false,"pushed_at":"2023-11-07T23:19:23.000Z","size":159,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-22T11:24:30.318Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-11T14:34:34.000Z","updated_at":"2024-03-28T20:35:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"7b56cb37-170a-4035-bb9a-942a31a73bb9","html_url":"https://github.com/polygonjs/polygonjs-react-three-fiber","commit_stats":{"total_commits":26,"total_committers":1,"mean_commits":26.0,"dds":0.0,"last_synced_commit":"59c3db6b30ef3f47bccc3f33819efb7718f05498"},"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-three-fiber","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs-react-three-fiber/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs-react-three-fiber/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs-react-three-fiber/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/polygonjs","download_url":"https://codeload.github.com/polygonjs/polygonjs-react-three-fiber/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245731527,"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":[],"created_at":"2024-10-30T05:13:23.526Z","updated_at":"2025-03-26T20:31:38.143Z","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_three_fiber/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_three_fiber\"\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 Three Fiber Component for Polygonjs\n\nThis is a react three fiber 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 three fiber, and benefit from its reactive states. You can then update the 3D scene from anything in your react three fiber 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_three_fiber/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_three_fiber/react_three_fiber_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-three-fiber)\n\n# Install\n\n```bash\nyarn add @polygonjs/react-three-fiber\n```\n\nor\n\n```bash\nnpm install @polygonjs/react-three-fiber\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 sceneName={\"scene_01\"} loadFunction={loadScene_scene_01} /\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\nrender (\n\t\u003cCanvas\u003e\n\t\t\u003cPolygonjsScene\n\t\t\tsceneName={\"scene_01\"}\n\t\t\tloadFunction={loadScene_scene_01} /\u003e;\n\t\u003c/Canvas\u003e\n)\n;\n```\n\n# Access the Polygonjs scene\n\nYou can update **any node** of the Polygonjs scene by passing props the `\u003cPolygonjsScene/\u003e` component.\n\nThe name of the prop must match the path of the parameter, which you can get by right-clicking on the parameter label.\n\nAnd 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.\n\nSo 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`.\n\nIn JSX, you can therefore set it like this:\n\n```\n\u003cPolygonjsScene\n\tsceneName={\"scene_01\"}\n\tloadFunction={loadScene_scene_01}\n\tgeo1-text1--text={'my new string'}\n/\u003e;\n```\n\nAnd 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`.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolygonjs%2Fpolygonjs-react-three-fiber","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolygonjs%2Fpolygonjs-react-three-fiber","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolygonjs%2Fpolygonjs-react-three-fiber/lists"}