{"id":16020536,"url":"https://github.com/leoncvlt/react-three-context","last_synced_at":"2026-06-20T19:31:04.141Z","repository":{"id":78007802,"uuid":"472014339","full_name":"leoncvlt/react-three-context","owner":"leoncvlt","description":null,"archived":false,"fork":false,"pushed_at":"2023-02-20T17:43:44.000Z","size":467,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-22T03:26:35.611Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leoncvlt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-03-20T15:04:02.000Z","updated_at":"2022-03-23T12:04:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"a8681cb8-2337-4ca8-ad9d-9940e16de3e1","html_url":"https://github.com/leoncvlt/react-three-context","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/leoncvlt/react-three-context","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leoncvlt%2Freact-three-context","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leoncvlt%2Freact-three-context/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leoncvlt%2Freact-three-context/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leoncvlt%2Freact-three-context/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leoncvlt","download_url":"https://codeload.github.com/leoncvlt/react-three-context/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leoncvlt%2Freact-three-context/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34583589,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-20T02:00:06.407Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-08T17:41:26.702Z","updated_at":"2026-06-20T19:31:04.122Z","avatar_url":"https://github.com/leoncvlt.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/leoncvlt"],"categories":[],"sub_categories":[],"readme":"# react-three-context\n\nContext \u0026 provider to integrate vanilla three.js in your React app.\n\n## Reasoning\n\nI like the usability of React for building user interfaces, but when it comes to three.js scenes, I prefer an imperative approach to the declarative one used by `react-three-fiber`.\n\nThis context / provider allows you to build your three.js scene in vanilla js, and use it in your React application.\n\n## Usage\n\nWrap your component / app in a `ThreeProvider`, passing a `script` prop:\n\n```js\nimport { ThreeProvider } from \"react-three-context\";\n\n\u003cThreeProvider script={threeScript} initialColor=\"red\"\u003e\n  \u003cApp /\u003e\n\u003c/ThreeProvider\u003e\n```\n\nA script is nothing more than an arrow function (or a class) which returns (at least) two methods `init` and `update`: `init` will be called on provider mount, while `update` will be called on each frame.\n\nA `canvas` prop will be available in the `init` function, alongside with any other prop passed to the `ThreeProvider`. Passing a custom `canvas` prop will override the built-in canvas reference (Useful if you want to pass a ref to your own canvas).\n\n`init` can be an async function.\n\n```js\nimport {\n  BoxGeometry,\n  Mesh,\n  MeshNormalMaterial,\n  PerspectiveCamera,\n  Scene,\n  WebGLRenderer,\n} from \"three\";\n\nconst threeScript = () =\u003e {\n  let renderer, scene, camera, box;\n  return {\n    init: (props) =\u003e {\n      const { canvas, initialColor } = props;\n\n      renderer = new WebGLRenderer({\n        antialias: true,\n        canvas: canvas,\n      });\n\n      scene = new Scene();\n      camera = new PerspectiveCamera();\n      camera.position.z = 4;\n\n      box = new Mesh(\n        new BoxGeometry(), \n        new MeshBasicMaterial({ color: new Color(initialColor)})\n      );\n      scene.add(box);\n    },\n\n    update: () =\u003e {\n      renderer.render(scene, camera);\n    },\n\n    changeColor: () =\u003e {\n      box.material.color = new Color(\n        math.random(), \n        math.random(), \n        math.random()\n      );\n    }\n  };\n};\n\n```\n\nThe built-in canvas will then be exported as a React component in the context as `ThreeCanvas`, alongside with any functions / parameters returned by the script passed to the `ThreeProvider`. Those can be accessed by using the convenience `useThree` hook.\n\nAny props passed to `ThreeCanvas` will be passed on the canvas element, allowing you to style it.\n\n```js\nimport { useThree } from \"react-three-context\";\n\nconst App = () =\u003e {\n  const { ThreeCanvas, changeColor } = useThree();\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eHello Three.js app!\u003c/p\u003e\n      \u003cbutton onClick={changeColor}\u003eChange Color\u003c/button\u003e\n      \u003cThreeCanvas className=\"fullscreen\"/\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## Support [![Buy me a coffee](https://img.shields.io/badge/-buy%20me%20a%20coffee-lightgrey?style=flat\u0026logo=buy-me-a-coffee\u0026color=FF813F\u0026logoColor=white \"Buy me a coffee\")](https://www.buymeacoffee.com/leoncvlt)\nIf this tool has proven useful to you, consider [buying me a coffee](https://www.buymeacoffee.com/leoncvlt) to support development of this and [many other projects](https://github.com/leoncvlt?tab=repositories).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleoncvlt%2Freact-three-context","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleoncvlt%2Freact-three-context","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleoncvlt%2Freact-three-context/lists"}