{"id":26690784,"url":"https://github.com/toxicFork/react-three-renderer","last_synced_at":"2025-03-26T16:01:05.730Z","repository":{"id":57096432,"uuid":"42784096","full_name":"firtoz/react-three-renderer","owner":"firtoz","description":"Render into a three.js canvas using React.","archived":true,"fork":false,"pushed_at":"2020-04-04T02:51:19.000Z","size":5087,"stargazers_count":1492,"open_issues_count":101,"forks_count":156,"subscribers_count":55,"default_branch":"master","last_synced_at":"2025-03-23T18:07:03.825Z","etag":null,"topics":["react","react-three-renderer"],"latest_commit_sha":null,"homepage":"https://toxicfork.github.com/react-three-renderer-example/","language":"JavaScript","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/firtoz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-19T18:08:21.000Z","updated_at":"2025-03-19T14:41:41.000Z","dependencies_parsed_at":"2022-08-20T16:10:46.167Z","dependency_job_id":null,"html_url":"https://github.com/firtoz/react-three-renderer","commit_stats":null,"previous_names":["toxicfork/react-three-renderer"],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firtoz%2Freact-three-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firtoz%2Freact-three-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firtoz%2Freact-three-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firtoz%2Freact-three-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/firtoz","download_url":"https://codeload.github.com/firtoz/react-three-renderer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245689494,"owners_count":20656416,"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":["react","react-three-renderer"],"created_at":"2025-03-26T16:00:39.172Z","updated_at":"2025-03-26T16:01:05.717Z","avatar_url":"https://github.com/firtoz.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","Utilities","React [🔝](#readme)"],"sub_categories":["Uncategorized","Framework bindings / integrations"],"readme":"react-three-renderer\n====================\n\n## PSA:\nThis project is pretty much frozen and the react-three-renderer-fiber project has been moving at a glacial rate. If you'd like to contribute to the React + Three bridge ecosystems, please take a look at how you can help with the more active https://github.com/drcmda/react-three-fiber project instead.\n\n## Back to regular readme\n\nRender into a [three.js](http://threejs.org/) canvas using [React](https://github.com/facebook/react).\n\nWould you like to know more? [See the wiki](https://github.com/toxicFork/react-three-renderer/wiki) or go straight to the [API documentation](https://github.com/toxicFork/react-three-renderer/wiki/API-Reference).\n\n[Live examples](http://toxicfork.github.io/react-three-renderer-example/).\n\n[![Join the chat at https://gitter.im/toxicFork/react-three-renderer](https://badges.gitter.im/toxicFork/react-three-renderer.svg)](https://gitter.im/toxicFork/react-three-renderer?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge) [![Build Status](https://travis-ci.org/toxicFork/react-three-renderer.svg)](https://travis-ci.org/toxicFork/react-three-renderer)\n\n[![npm](https://nodei.co/npm/react-three-renderer.svg?downloads=true)](https://nodei.co/npm/react-three-renderer/)\n\nCurrent State\n=============\n\nThis is still an experimental and work in progress project, use at your own risk!\n\nCurrently supported react version: `15.5.3` ( things break fast when you fly this close to the sun )\n\nThis project is being maintained and developed relatively slowly.\n\nCurrently we're working on restoring compatibility with React 16 - Fiber edition!\n\nSee work in progress within https://github.com/toxicFork/react-three-renderer-fiber.\n\nExpected ETA: Unknown.\n\nInstallation\n============\n\n```\nnpm install --save react@15.6.1 react-dom@15.6.1 three@0.86.0\nnpm install --save react-three-renderer\n```\n\nUsage\n=====\nThe default export of the module is a react component. When mounted, any children of it will be placed into the three.js\nenvironment.\n\nHere's a simple example that implements the [getting started scene for three.js](https://threejs.org/docs/#manual/introduction/Creating-a-scene).\n\n```js\nimport React from 'react';\nimport React3 from 'react-three-renderer';\nimport * as THREE from 'three';\nimport ReactDOM from 'react-dom';\n\nclass Simple extends React.Component {\n  constructor(props, context) {\n    super(props, context);\n\n    // construct the position vector here, because if we use 'new' within render,\n    // React will think that things have changed when they have not.\n    this.cameraPosition = new THREE.Vector3(0, 0, 5);\n\n    this.state = {\n      cubeRotation: new THREE.Euler(),\n    };\n\n    this._onAnimate = () =\u003e {\n      // we will get this callback every frame\n\n      // pretend cubeRotation is immutable.\n      // this helps with updates and pure rendering.\n      // React will be sure that the rotation has now updated.\n      this.setState({\n        cubeRotation: new THREE.Euler(\n          this.state.cubeRotation.x + 0.1,\n          this.state.cubeRotation.y + 0.1,\n          0\n        ),\n      });\n    };\n  }\n\n  render() {\n    const width = window.innerWidth; // canvas width\n    const height = window.innerHeight; // canvas height\n\n    return (\u003cReact3\n      mainCamera=\"camera\" // this points to the perspectiveCamera which has the name set to \"camera\" below\n      width={width}\n      height={height}\n\n      onAnimate={this._onAnimate}\n    \u003e\n      \u003cscene\u003e\n        \u003cperspectiveCamera\n          name=\"camera\"\n          fov={75}\n          aspect={width / height}\n          near={0.1}\n          far={1000}\n\n          position={this.cameraPosition}\n        /\u003e\n        \u003cmesh\n          rotation={this.state.cubeRotation}\n        \u003e\n          \u003cboxGeometry\n            width={1}\n            height={1}\n            depth={1}\n          /\u003e\n          \u003cmeshBasicMaterial\n            color={0x00ff00}\n          /\u003e\n        \u003c/mesh\u003e\n      \u003c/scene\u003e\n    \u003c/React3\u003e);\n  }\n}\n\nReactDOM.render(\u003cSimple/\u003e, document.body);\n```\n\nTo go further, [follow the white rabbit](https://github.com/toxicFork/react-three-renderer/wiki/Entry-Point).\n\nBuilding\n========\n\nFork and clone this repository, then do a npm install.\n\n``` npm run compile ``` produces es5 compatible code in the 'lib' directory.\n\nYou can use [npm link](https://docs.npmjs.com/cli/link) or [local npm install](http://stackoverflow.com/questions/8088795/installing-a-local-module-using-npm) if you would like to play with your fork.\n\nTesting\n=======\n\n```\n# make sure that you have run compile first\nnpm run compile\nnpm test\n```\n\nCurrently it runs tests on Chrome, but other browser support can be added if necessary.\nMore information on testing will be added here.\n\nInfluences\n==========\n\nI have been heavily inspired by [react-three](https://github.com/Izzimach/react-three) by [Izzimach](https://github.com/Izzimach/).\n\nAfter finding out about [React 0.14](https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html), I have decided to see how someone would approach writing their own custom renderer.\n\nThis is the outcome of that curiosity.\n\nImplementation Details\n======================\n\nI have looked very deeply into how react-dom works. It is internally referred as ReactMount.\n\nStarting from ReactMount#render, I duplicated the functionality, function by function, line by line.\n\nWherever the DOM was mentioned, I replaced them with generic equivalents.\n\nI tried to point to existing functions as long as they were not corrupted by the DOM.\n\nThen I wrote my own internal components, these are things like ``` \u003cspan/\u003e ```, ``` \u003cdiv/\u003e ```, ``` \u003ctable/\u003e ```. Except, now they are  ``` \u003cscene/\u003e ```, ``` \u003cobject3D/\u003e ```, ``` \u003cmesh/\u003e ```.\n\nThis way, you don't need to import a gazillion different modules.\n\nAnother benefit is that it allows me to make things super fast and not depend on composite components at all! \n\nIn effect, a ``` \u003cscene/\u003e ``` has the same effort, and similar effects as creating a  ``` \u003cdiv/\u003e ```. \n\nTODO\n====\n- More Documentation\n- More Testing\n- More examples\n- More Performance optimizations\n- Implement rest of three.js library ( See #2 )\n- Make it generic and allow the world to create their own custom react renderers!\n    - It's not that hard, trust me ;)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FtoxicFork%2Freact-three-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FtoxicFork%2Freact-three-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FtoxicFork%2Freact-three-renderer/lists"}