Create/control a three.js canvas using React.
To use React for drawing 2D using WebGL, try react-pixi.
You can view an interactive demo (hopefully) at my github demo page. This demo is also available as a standalone project at r3test
An example render functions from the examples:
render: function() {
var MainCameraElement = React.createElement(
ReactTHREE.PerspectiveCamera,
{name:'maincamera', fov:'75', aspect:this.props.width/this.props.height,
near:1, far:5000,
position:new THREE.Vector3(0,0,600), lookat:new THREE.Vector3(0,0,0)});
return React.createElement(
ReactTHREE.Scene,
{width:this.props.width, height:this.props.height, camera:'maincamera'},
MainCameraElement,
React.createElement(Cupcake, this.props.cupcakedata)
);
}
or if you want to use JSX,
render: function() {
var aspectratio = this.props.width / this.props.height;
var cameraprops = {fov:75, aspect:aspectratio, near:1, far:5000,
position:new THREE.Vector3(0,0,600), lookat:new THREE.Vector3(0,0,0)};
return <Scene width={this.props.width} height={this.props.height} camera="maincamera">
<PerspectiveCamera name="maincamera" {...cameraprops} />
<Cupcake {...this.props.cupcakedata} />
</Scene>;
}
If you are building a project with a package.json
file you can
npm install react --save
npm install react-three --save
and then access the extensions via a require
expression:
var React = require('react');
var ReactTHREE = require('react-three');
var THREE = require('three');
Checkout the git repository. You will need node and npm. You should probably install gulp globally as well.
git clone https://github.com/Izzimach/react-three.git
cd react-three
npm install -g gulp
npm install
At this point, simply running
gulp
Will package up the react-three components along with React and put the result in build/react-three.js. If you include this into your webpage via a script tag:
<script src="react-three.js"></script>
Then the relevant parts will be accessed in the global namespace as React
, ReactTHREE
, and THREE
.
Examples are set up in the examples/ directory. You can run
gulp livereload
Then open the example index in your browser at http://localhost:8080/
Certain tests require WebGL and cannot be run on the CI test server. Because of this, it is recommended that you run the tests locally before submitting a pull request.
You can run tests using gulp:
gulp test
Certain tests compare results to know correct reference images. If for some reason you need to generate (or regenerate) the pixel reference images you need to install phantomjs and run
gulp pixelrefs