{"id":13574094,"url":"https://github.com/brianzinn/react-babylonjs","last_synced_at":"2026-01-12T05:31:12.247Z","repository":{"id":37335792,"uuid":"78896316","full_name":"brianzinn/react-babylonjs","owner":"brianzinn","description":"React for Babylon 3D engine","archived":false,"fork":false,"pushed_at":"2025-09-03T21:24:34.000Z","size":139054,"stargazers_count":879,"open_issues_count":11,"forks_count":109,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-11-06T01:06:49.399Z","etag":null,"topics":["3d","3d-engine","3d-models","babylonjs","physics","react","reactjs","vr"],"latest_commit_sha":null,"homepage":"https://brianzinn.github.io/react-babylonjs/","language":"TypeScript","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/brianzinn.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,"zenodo":null}},"created_at":"2017-01-13T23:57:40.000Z","updated_at":"2025-11-03T07:42:03.000Z","dependencies_parsed_at":"2023-02-18T10:00:39.214Z","dependency_job_id":"ff152a06-985a-4098-abf3-c454042d61de","html_url":"https://github.com/brianzinn/react-babylonjs","commit_stats":{"total_commits":529,"total_committers":23,"mean_commits":23.0,"dds":"0.14555765595463133","last_synced_commit":"b9a40ed2db3a7aa41c381357dbd39962826671c0"},"previous_names":[],"tags_count":88,"template":false,"template_full_name":null,"purl":"pkg:github/brianzinn/react-babylonjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianzinn%2Freact-babylonjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianzinn%2Freact-babylonjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianzinn%2Freact-babylonjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianzinn%2Freact-babylonjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brianzinn","download_url":"https://codeload.github.com/brianzinn/react-babylonjs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianzinn%2Freact-babylonjs/sbom","scorecard":{"id":253534,"data":{"date":"2022-08-15","repo":{"name":"github.com/brianzinn/react-babylonjs","commit":"320575ce0b489fe6521b750ed5b8437aa15d3d7c"},"scorecard":{"version":"v4.5.0-17-g7772984","commit":"777298477c07c262a4ec7e95ceee839b7b3b75ae"},"score":5.4,"checks":[{"name":"Code-Review","score":1,"reason":"GitHub code reviews found for 3 commits out of the last 30 -- score normalized to 1","details":["Warn: no reviews found for commit: 320575ce0b489fe6521b750ed5b8437aa15d3d7c","Warn: no reviews found for commit: ca98fe12e2d8dae480b1b0870b434da32c809809","Warn: no reviews found for commit: fcc7ba4433df5e7865c2e56a655ac24a507047fa","Warn: no reviews found for commit: 9f9370b928244a3c2da453e512c8a2159714e526","Warn: no reviews found for commit: 2324ad0faf6b22cae6e4aa23f4d88ee3ec25bdb8","Warn: no reviews found for commit: fa73d41cfbff5d899b699ea2354c09f70b9b8c81","Warn: no reviews found for commit: 318502acf7d213f6effc2da948f009f27d2a574f","Warn: no reviews found for commit: 9cc61f23873857962a68ad431e8fb021ecfcb3e0","Warn: no reviews found for commit: 8a28e3856c8ef5365d87492ca8bcb3b985a3154f","Warn: no reviews found for commit: 136ff8c76716ee90b8b9a3bde5eb90dda0908792","Warn: no reviews found for commit: ea54b99de1f5d03df43dc57c54080f44db8d3bed","Warn: no reviews found for commit: 5903f18bf9329677a23e1ab353b082fca1f4f28b","Warn: no reviews found for commit: 6691f7a9ae1a4e24e0cbfa625d76339e04addedb","Warn: no reviews found for commit: 7b72e9b7bbd23be944006019c2d2778067f33789","Warn: no reviews found for commit: 8560ccc5fd41df71ebb86aef59aed2399561512e","Warn: no reviews found for commit: d403829d18256c0254427a326f2dbe3b337b8eb7","Warn: no reviews found for commit: 52e451b0063dc72aade43d96ecc47083be062e37","Warn: no reviews found for commit: 5dc217a9c1936853e1ac1ac2129faaa7858196a0","Warn: no reviews found for commit: b0e2d79ff84af5e07f5c6064586065665a85c164","Warn: no reviews found for commit: 103d41891582d1cab3c8598713e18e5e8be168dc","Warn: no reviews found for commit: a2fc684e26b9c6b04cbacef1f2dfcd447ff3cc28","Warn: no reviews found for commit: a75b50a407a23b3c69cc9f282f6576b1eb9aaa53","Warn: no reviews found for commit: 18b1409fcfcbc2beacd2a899e7e820590627aec2","Warn: no reviews found for commit: 1dcf953b7f8033c510434f1c7289fd892b410a28","Warn: no reviews found for commit: 908b180c821bcb3743ffac76b46806ed8f174ad2","Warn: no reviews found for commit: 4ade2141d28d87f2c3bf412e871650e2c28f1436","Warn: no reviews found for commit: 800617f3b24ce64514ee02780b2acd15f76bca1f"],"documentation":{"short":"Determines if the project requires code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#code-review"}},{"name":"Maintained","score":10,"reason":"12 commit(s) out of 30 and 14 issue activity out of 30 found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#maintained"}},{"name":"CII-Best-Practices","score":0,"reason":"no badge detected","details":null,"documentation":{"short":"Determines if the project has a CII Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#cii-best-practices"}},{"name":"Vulnerabilities","score":10,"reason":"no vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#vulnerabilities"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":["Warn: no GitHub releases found"],"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#branch-protection"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#dangerous-workflow"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: : packages/react-babylonjs/LICENSE:1"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#license"}},{"name":"Token-Permissions","score":0,"reason":"non read-only tokens detected in GitHub workflows","details":["Warn: no topLevel permission defined: .github/workflows/pre-release.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/skiff-dispatcher/pre-release.yml/master?enable=permissions","Warn: no topLevel permission defined: .github/workflows/release.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/skiff-dispatcher/release.yml/master?enable=permissions"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#binary-artifacts"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":null,"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#security-policy"}},{"name":"Dependency-Update-Tool","score":-1,"reason":"internal error: Search.Code: GET https://api.github.com/search/commits?per_page=100\u0026q=repo%3Abrianzinn%2Freact-babylonjs+author%3Adependabot%5Bbot%5D: 403 You have exceeded a secondary rate limit. Please wait a few minutes before you try again. []","details":null,"documentation":{"short":"Determines if the project uses a dependency update tool.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#dependency-update-tool"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":null,"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#fuzzing"}},{"name":"Pinned-Dependencies","score":5,"reason":"dependency not pinned by hash detected -- score normalized to 5","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pre-release.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/skiff-dispatcher/pre-release.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pre-release.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/skiff-dispatcher/pre-release.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/skiff-dispatcher/release.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/skiff-dispatcher/release.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:62: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/skiff-dispatcher/release.yml/master?enable=pin","Warn: containerImage not pinned by hash: packages/static/Dockerfile:1: pin your Docker image by updating node to node@sha256:a6f295c2354992f827693a2603c8b9b5b487db4da0714f5913a917ed588d6d41","Warn: npmCommand not pinned by hash: packages/static/Dockerfile:8","Warn: npmCommand not pinned by hash: .github/workflows/release.yml:34","Info: no insecure (not pinned by hash) dependency downloads found in Dockerfiles","Info: no insecure (not pinned by hash) dependency downloads found in shell scripts"],"documentation":{"short":"Determines if the project has declared and pinned its dependencies.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#pinned-dependencies"}},{"name":"Packaging","score":10,"reason":"publishing workflow detected","details":["Info: GitHub publishing workflow used in run https://api.github.com/repos/brianzinn/react-babylonjs/actions/runs/473122818: .github/workflows/pre-release.yml:14"],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#packaging"}}]},"last_synced_at":"2025-08-17T09:02:16.502Z","repository_id":37335792,"created_at":"2025-08-17T09:02:16.502Z","updated_at":"2025-08-17T09:02:16.502Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28335202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","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":["3d","3d-engine","3d-models","babylonjs","physics","react","reactjs","vr"],"created_at":"2024-08-01T15:00:46.415Z","updated_at":"2026-01-12T05:31:12.242Z","avatar_url":"https://github.com/brianzinn.png","language":"TypeScript","funding_links":[],"categories":["Projects","TypeScript","3D"],"sub_categories":[],"readme":"# react-babylonjs\n\n\u003e _'react-babylonjs'_ integrates the Babylon.js real time 3D engine with React\n\n`react-babylonjs` lets you build your scene and components using a familiar\ndeclarative syntax with the benefits of reusable components and hooks. The\nBabylon.js API is mostly covered declaratively thanks to code generation and\neven custom props allow you to declaratively add shadows, physics, 3D models,\nattach 2D/3D UI to meshes, etc.\n\n**NOTE:** for the time being React 19 works with newest and @latest versions.\nFor older React versions, you will need to use 3.2.2 (ie:\n`yarn add react-babylonjs@3.2.2`). Hope next version will support both. I tried\nto stay away from a major bump due to the ephemeral nature of this change.\nThanks for your patience.\n\n## install\n```bash\nnpm i react-babylonjs\n```\n```bash\nyarn add react-babylonjs\n```\n\nFully supports hooks. Full support for TypeScript with auto-completion on\nelements and compile time checks. Context API and hooks provide easy access to\nScene/Engine/Canvas.\n\n[![NPM version](http://img.shields.io/npm/v/react-babylonjs.svg?style=flat-square)](https://www.npmjs.com/package/react-babylonjs)\n[![NPM downloads](http://img.shields.io/npm/dm/react-babylonjs.svg?style=flat-square)](https://www.npmjs.com/package/react-babylonjs)\n\n_No third party dependencies outside of React + babylon.js_\n\n[https://brianzinn.github.io/react-babylonjs/](https://brianzinn.github.io/react-babylonjs/)\n\n## Examples\n\n~50 sample web pages with viewable source code on:\n[github pages examples](https://brianzinn.github.io/react-babylonjs/examples).\n\n## Example Projects\n\n- [Create React App (JavaScript)](https://github.com/brianzinn/create-react-app-babylonjs)\n  CRA JavaScript implementation. Github pages has live examples of typical and\n  declarative usage some with Redux.\n- [Create React App (TypeScript)](https://github.com/brianzinn/create-react-app-typescript-babylonjs)\n  CRA 3 TypeScript. Examples of physics, shadows, etc.\n\n## React Native\n\nNo online examples for native, but you can integrate using\n`EngineCanvasContext.Provider`:\n\n```jsx\nimport React, { useState } from 'react';\nimport { View } from 'react-native';\n\nimport { EngineView, useEngine } from '@babylonjs/react-native';\nimport { Camera } from '@babylonjs/core';\nimport { EngineCanvasContext, Scene } from 'react-babylonjs';\n\nconst EngineScreen: FunctionComponent\u003cViewProps\u003e = (props: ViewProps) =\u003e {\n\n  const engine = useEngine();\n  const [camera, setCamera] = useState\u003cCamera\u003e();\n\n  return (\n    \u003cView style={props.style}\u003e\n      \u003cEngineCanvasContext.Provider value={{ engine, canvas: null }}\u003e\n        {engine \u0026\u0026\n          \u003cScene\u003e\n            \u003carcRotateCamera\n              name=\"camera1\"\n              onCreated={camera =\u003e setCamera(camera)}\n            /\u003e\n            \u003chemisphericLight name=\"light1\" /\u003e\n            { /* rest of declarative scene/components here */ }\n          \u003c/Scene\u003e\n        }\n      \u003c/EngineCanvasContext.Provider\u003e\n      \u003cEngineView camera={camera} displayFrameRate={true} /\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\n## Contributors\n\n- Huge shout out to [Konsumer](https://github.com/konsumer) that helped bring\n  this project to the next level. The ideas and code sandboxes from issue #6\n  inspired the code generation and HOC + Context API integration.\n- [seacloud9](https://github.com/seacloud9) for adding\n  [storybook](https://brianzinn.github.io/react-babylonjs/),\n  [GSAP demo](https://brianzinn.github.io/react-babylonjs/?path=/story/integrations--gsap-timeline),\n  [dynamic terrain](https://brianzinn.github.io/react-babylonjs/examples/basic/dynamic-terrain)\n  (extension) \u0026\n  [PIXI demo](https://brianzinn.github.io/react-babylonjs/?path=/story/integrations--pixi-story).\n- [hookex](https://github.com/hookex) has made the largest contribution :smiley:\n  Proper texture handling\n  [demo](https://brianzinn.github.io/react-babylonjs/examples/textures/image-textures),\n  Node parenting,\n  [demo](https://brianzinn.github.io/react-babylonjs/examples/basic/transform-node)\n  Full Screen GUI\n  [demo](https://brianzinn.github.io/react-babylonjs/examples/gui/gui-demo),\n  Effect Layers\n  [glow demo](https://brianzinn.github.io/react-babylonjs/examples/special-fx/glow-layer),\n  behaviors\n  [demo](https://brianzinn.github.io/react-babylonjs/examples/behaviors/pointer-drag),\n  useHover \u0026 useClick hooks\n  [demo](https://brianzinn.github.io/react-babylonjs/examples/hooks/hover) and\n  react-spring integration as author of `react-babylon-spring` -\n  https://github.com/hookex/react-babylon-spring.\n- [dennemark](https://github.com/dennemark) add support for\n  `CascadedShadowGenerator`, `createPortal` and `Html` (project HTML in scene -\n  ported from `drei`). Also, stories for\n  [Snippet Material](https://brianzinn.github.io/react-babylonjs/examples/basic/snippet-material)\n  and\n  [\"tunnel\" zustand integration](https://brianzinn.github.io/react-babylonjs/?path=/story/integrations--zustand-tunnel).\n  Added `RenderOnDemand` to customize render loops.\n- [kencyke](https://github.com/kencyke) created a cool multi-canvas + cloud\n  point repo that insipired creation of `\u003cpointsCloudSystem .../\u003e` as host\n  element.\n- [flostellbrink](https://github.com/flostellbrink) fixed the\n  `react-babylon-spring` integration and added GH action for Storybook\n  ([github pages](https://brianzinn.github.io/react-babylonjs))\n- [voronp](https://github.com/voronp) add `isPaused` Engine prop to skip\n  rendering\n- [saidmoya12](https://github.com/saidmoya12) add camera before/after render\n  hooks\n- [Viktor Zhurbin](https://github.com/ViktorZhurbin) rebuilt single handedly a\n  much improved GH pages website using rspress. Including a complete rewrite of\n  how inline code samples are displayed, so you can view fullscreen, multiple\n  files and toggle between code/preview/split and a much better search and\n  mobile experience. Also, the amazing\n  [Playground](https://brianzinn.github.io/react-babylonjs/playground) was added\n  including saved and sharable snippets/forking!\n- [Baris Ozcetin](https://github.com/barisozcetin) add React 19 support\n\n\u003e Thanks also to all the people who have contributed with\n\u003e issues/questions/discussions. All the great ideas and requests are why this\n\u003e project evolved beyond an experiment.\n\nMade with ♥\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianzinn%2Freact-babylonjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrianzinn%2Freact-babylonjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianzinn%2Freact-babylonjs/lists"}