{"_id":"@alexkuz/react-three-renderer","_rev":"5-8ea2f2284634f8a61b78edfe7337fcc1","name":"@alexkuz/react-three-renderer","description":"Render into a three.js canvas using React.","dist-tags":{"latest":"3.1.0"},"versions":{"3.0.0":{"name":"@alexkuz/react-three-renderer","version":"3.0.0","description":"Render into a three.js canvas using React.","main":"./lib/React3.js","scripts":{"compile":"gulp babel","prepublish":"not-in-install && npm run compile && npm test || in-install","test":"npm run eslint-internal -loglevel silent && npm run karma-src -loglevel silent && npm run karma-lib -loglevel silent","karma-single":"karma start ./tests/karma.conf.js --single-run","karma":"karma start ./tests/karma.conf.js","karma-src":"bash -c \"(export KARMA_SRC=true; npm run karma-single -loglevel silent)\"","karma-lib":"bash -c \"(export KARMA_LIB=true; npm run karma-single -loglevel silent)\"","eslint-internal":"eslint --cache ./src/ ./docs/src/ ./tests/src/","eslint":"npm run eslint-internal -loglevel silent || true","tdd":"bash -c \"(export KARMA_TDD=true; npm run karma)\"","cover":"bash -c \"(export KARMA_COVERAGE=true; npm run karma-src)\""},"author":{"name":"Firtina \"toxicFork\" Ozbalikci"},"keywords":["react","three.js"],"license":"MIT","dependencies":{"fbjs":"0.8.3"},"peerDependencies":{"react":"~15.3.0","three":">=0.78.0 < 0.80.0"},"devDependencies":{"babel-cli":"6.11.4","babel-core":"6.13.2","babel-eslint":"6.1.2","babel-loader":"6.2.4","babel-plugin-transform-decorators-legacy":"1.3.4","babel-plugin-transform-runtime":"6.12.0","babel-polyfill":"6.13.0","babel-preset-es2015":"6.13.2","babel-preset-react":"6.11.1","babel-preset-stage-0":"6.5.0","babel-register":"6.11.6","babel-runtime":"6.11.6","chai":"3.5.0","del":"2.2.2","dirty-chai":"1.2.2","eslint":"3.3.0","eslint-config-airbnb":"10.0.1","eslint-plugin-import":"1.13.0","eslint-plugin-jsx-a11y":"^2.1.0","eslint-plugin-react":"6.0.0","estraverse-fb":"1.3.1","ghooks":"1.3.2","gulp":"3.9.1","gulp-babel":"6.1.2","gulp-util":"3.0.7","in-publish":"2.0.0","isparta-loader":"2.0.0","karma":"1.2.0","karma-chai":"0.1.0","karma-chrome-launcher":"1.0.1","karma-coverage":"1.1.1","karma-mocha":"1.1.1","karma-sourcemap-loader":"0.3.7","karma-spec-reporter":"0.0.26","karma-webpack":"1.8.0","mocha":"3.0.2","mocha-loader":"0.7.1","pngjs2":"2.0.0","react":"15.3.0","react-dom":"15.3.0","sinon":"2.0.0-pre","source-map-support":"0.4.2","stream-to-string":"1.1.0","three":"0.79.0","webpack":"1.13.1","webpack-dev-server":"1.14.1"},"repository":{"type":"git","url":"git+https://github.com/toxicFork/react-three-renderer.git"},"babel":{"presets":["es2015","stage-0","react"],"plugins":["transform-decorators-legacy"]},"bugs":{"url":"https://github.com/toxicFork/react-three-renderer/issues"},"homepage":"https://github.com/toxicFork/react-three-renderer#readme","config":{"ghooks":{"pre-commit":"echo Running eslint before commit && npm run eslint-internal -loglevel silent"}},"gitHead":"26d1702b8830354c1a8a772e59c5547e88f04615","_id":"@alexkuz/react-three-renderer@3.0.0","_shasum":"627222d0794e0de06b90b101e8a8cd4b23ff4b49","_from":".","_npmVersion":"3.7.3","_nodeVersion":"4.3.1","_npmUser":{"name":"alexkuz","email":"alexkuz@gmail.com"},"maintainers":[{"name":"alexkuz","email":"alexkuz@gmail.com"}],"dist":{"shasum":"627222d0794e0de06b90b101e8a8cd4b23ff4b49","tarball":"https://registry.npmjs.org/@alexkuz/react-three-renderer/-/react-three-renderer-3.0.0.tgz","integrity":"sha512-aceLsYPwgi7hOgwjD9A3b/nS3m0bhjUOyJTQmParY/CLbQlNck7H7llBDDPgqCMxfFgiVGTz7T3zDUMtcqCzuA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDH7gi4PHxJhBV4nWpYKIkL8s5cWYC4zHvlnNM+jvsDawIgRllBpfk2TrKdhFqSHZEn8z46OZP+C8dNBhvUL5TpnJU="}]},"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-three-renderer-3.0.0.tgz_1474570767509_0.15739630116149783"}},"3.1.0":{"name":"@alexkuz/react-three-renderer","version":"3.1.0","description":"Render into a three.js canvas using React.","main":"./lib/React3.js","scripts":{"compile":"gulp babel","test":"gulp test"},"author":{"name":"Firtina \"toxicFork\" Ozbalikci"},"keywords":["react","three.js"],"license":"MIT","dependencies":{"fbjs":"0.8.12"},"peerDependencies":{"react":"~15.5.3","react-dom":"~15.5.3","three":"~0.84.0"},"devDependencies":{"babel-cli":"6.24.1","babel-core":"6.24.1","babel-eslint":"7.2.1","babel-loader":"6.4.1","babel-plugin-transform-decorators-legacy":"1.3.4","babel-plugin-transform-runtime":"6.23.0","babel-polyfill":"6.23.0","babel-preset-es2015":"6.24.1","babel-preset-react":"6.24.1","babel-preset-stage-0":"6.24.1","babel-register":"6.24.1","babel-runtime":"6.23.0","chai":"3.5.0","del":"2.2.2","dirty-chai":"1.2.2","eslint":"3.19.0","eslint-config-airbnb":"14.1.0","eslint-plugin-import":"2.2.0","eslint-plugin-jsx-a11y":"4.0.0","eslint-plugin-react":"6.10.3","estraverse-fb":"1.3.1","gulp":"github:gulpjs/gulp#4.0","gulp-babel":"6.1.2","gulp-cached":"^1.1.1","gulp-eslint":"^3.0.1","gulp-util":"3.0.8","in-publish":"^2.0.0","isparta-loader":"2.0.0","karma":"1.6.0","karma-chai":"0.1.0","karma-chrome-launcher":"2.0.0","karma-coverage":"1.1.1","karma-mocha":"1.3.0","karma-sourcemap-loader":"0.3.7","karma-spec-reporter":"0.0.30","karma-travis-fold-reporter":"1.0.1","karma-webpack":"2.0.3","mocha":"3.2.0","mocha-loader":"1.1.1","pngjs2":"2.0.0","react":"15.5.3","react-dom":"15.5.3","sinon":"2.1.0","source-map-support":"0.4.14","stream-to-string":"1.1.0","three":"0.84.0","webpack":"2.3.3","webpack-dev-server":"2.4.2"},"repository":{"type":"git","url":"git+https://github.com/toxicFork/react-three-renderer.git"},"babel":{"presets":["es2015","stage-0","react"],"plugins":["transform-decorators-legacy"]},"bugs":{"url":"https://github.com/toxicFork/react-three-renderer/issues"},"homepage":"https://github.com/toxicFork/react-three-renderer#readme","gitHead":"8e1a21375a66d05fec367895ad8efaf70c8704ec","_id":"@alexkuz/react-three-renderer@3.1.0","_npmVersion":"5.0.2","_nodeVersion":"7.6.0","_npmUser":{"name":"alexkuz","email":"alexkuz@gmail.com"},"dist":{"integrity":"sha512-67hrUmQFcgkjEZBLBhVCVEiel1kD24oPCMyoOa263EGH09PJEFoXh096f0Jyk3NAEA7VnHBRVwEASWL+kJhgCg==","shasum":"efe38238a2268e4ea5bdeaf89127c690b3f8b241","tarball":"https://registry.npmjs.org/@alexkuz/react-three-renderer/-/react-three-renderer-3.1.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvvJQG6ROFArxbhbHdB7gN2u8DUlK+qZgN85bsGMXmVAIhAO0Js4u/5tdE5C6W5k2GvtPNqLRV+8UmLW825RwOqTg7"}]},"maintainers":[{"name":"alexkuz","email":"alexkuz@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-three-renderer-3.1.0.tgz_1499936654085_0.3888449298683554"}}},"readme":"react-three-renderer\n====================\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> This is still an experimental and work in progress project, use at your own risk!\n\n> Currently supported react version: `15.5.3` ( things break fast when you fly this close to the sun )\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&utm_medium=badge&utm_campaign=pr-badge&utm_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\nInstallation\n============\n\n```\nnpm install --save react@15.5.3 react-dom@15.5.3 three@0.84.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](http://threejs.org/docs/index.html#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 = () => {\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 (<React3\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    >\n      <scene>\n        <perspectiveCamera\n          name=\"camera\"\n          fov={75}\n          aspect={width / height}\n          near={0.1}\n          far={1000}\n\n          position={this.cameraPosition}\n        />\n        <mesh\n          rotation={this.state.cubeRotation}\n        >\n          <boxGeometry\n            width={1}\n            height={1}\n            depth={1}\n          />\n          <meshBasicMaterial\n            color={0x00ff00}\n          />\n        </mesh>\n      </scene>\n    </React3>);\n  }\n}\n\nReactDOM.render(<Simple/>, 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 ``` <span/> ```, ``` <div/> ```, ``` <table/> ```. Except, now they are  ``` <scene/> ```, ``` <object3D/> ```, ``` <mesh/> ```.\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 ``` <scene/> ``` has the same effort, and similar effects as creating a  ``` <div/> ```. \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","maintainers":[{"name":"alexkuz","email":"alexkuz@gmail.com"}],"time":{"modified":"2022-06-12T14:29:00.164Z","created":"2016-09-22T18:59:29.659Z","3.0.0":"2016-09-22T18:59:29.659Z","3.1.0":"2017-07-13T09:04:15.422Z"},"homepage":"https://github.com/toxicFork/react-three-renderer#readme","keywords":["react","three.js"],"repository":{"type":"git","url":"git+https://github.com/toxicFork/react-three-renderer.git"},"author":{"name":"Firtina \"toxicFork\" Ozbalikci"},"bugs":{"url":"https://github.com/toxicFork/react-three-renderer/issues"},"license":"MIT","readmeFilename":"README.md"}