Add basic OrbitControl support to THREEScene, with one example.

Izzimach · Aug 10, 2015 · 8318719 · 8318719
1 parent 86fd065
commit 8318719
Show file tree

Hide file tree

Showing 4 changed files with 827 additions and 0 deletions.
diff --git a/examples/orbitcontrols/orbitcontrols.html b/examples/orbitcontrols/orbitcontrols.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html><html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="utf-8">
+
+    <title>React-Three test</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            background-color: #000000;
+        }
+        #three-box canvas {
+            display: block;
+            margin: auto;
+            padding: 0;
+            border : 0;
+        }
+    </style>
+    <script src="../../build/react-three.js"></script>
+    <script src="../../vendor/OrbitControls.js"></script>
+    <script src="orbitcontrols.js"></script>
+</head>
+<body>
+    <div id="three-box"></div>
+    <script>
+    window.onload = orbitcontrolsstart;
+    </script>
+ </body>
+</html>
diff --git a/examples/orbitcontrols/orbitcontrols.js b/examples/orbitcontrols/orbitcontrols.js
@@ -0,0 +1,77 @@
+//
+// Basic React-THREE example using a custom 'Cupcake' Component which consists of two cubes
+//
+
+/* jshint strict: false */
+/* global React : false */
+/* global ReactTHREE : false */
+/* global THREE : false */
+
+var assetpath = function(filename) { return '../assets/' + filename; };
+
+var MeshFactory = React.createFactory(ReactTHREE.Mesh);
+
+//
+// Cupcake component is two cube meshes textured with cupcake textures
+//
+
+var boxgeometry = new THREE.BoxGeometry( 200,200,200);
+
+var cupcaketexture = THREE.ImageUtils.loadTexture( assetpath('cupCake.png') );
+var cupcakematerial = new THREE.MeshBasicMaterial( { map: cupcaketexture } );
+
+var creamtexture = THREE.ImageUtils.loadTexture( assetpath('creamPink.png') );
+var creammaterial = new THREE.MeshBasicMaterial( { map: creamtexture } );
+
+var Cupcake = React.createClass({
+  displayName: 'Cupcake',
+  propTypes: {
+    position: React.PropTypes.instanceOf(THREE.Vector3),
+    quaternion: React.PropTypes.instanceOf(THREE.Quaternion).isRequired
+  },
+  render: function() {
+    return React.createElement(
+      ReactTHREE.Object3D,
+      {quaternion:this.props.quaternion, position:this.props.position || new THREE.Vector3(0,0,0)},
+      MeshFactory({position:new THREE.Vector3(0,-100,0), geometry:boxgeometry, material:cupcakematerial}),
+      MeshFactory({position:new THREE.Vector3(0, 100,0), geometry:boxgeometry, material:creammaterial})
+    );
+  }
+});
+
+//
+// The top level component
+// props:
+// - width,height : size of the overall render canvas in pixels
+// - xposition: x position in pixels that governs where the elements are placed
+//
+
+var ExampleScene = React.createClass({
+  displayName: 'ExampleScene',
+  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', orbitControls:THREE.OrbitControls},
+      MainCameraElement,
+      React.createElement(Cupcake, this.props.cupcakedata)
+    );
+  }
+});
+
+/* jshint unused:false */
+function orbitcontrolsstart() {
+  var renderelement = document.getElementById("three-box");
+
+  var w = window.innerWidth-6;
+  var h = window.innerHeight-6;
+
+  var sceneprops = {width:w, height:h, cupcakedata:{position:new THREE.Vector3(0,0,0), quaternion:new THREE.Quaternion()}};
+  var cupcakeprops = sceneprops.cupcakedata;
+  var rotationangle = 0;
+
+  var reactinstance = React.render(React.createElement(ExampleScene,sceneprops), renderelement);
+}
diff --git a/src/ReactTHREE.js b/src/ReactTHREE.js
@@ -343,6 +343,8 @@ var THREEScene = React.createClass({
 
     this._THREEcamera = camera;
 
+    this.mountOrbitControls(props);
+
     this.renderScene();
 
     var that = this;
@@ -404,6 +406,8 @@ var THREEScene = React.createClass({
       THREEObject3DMixin.applyTHREEObject3DPropsToObject(this._THREEcamera, oldProps.camera || {}, props.camera || {});
     }
 
+    this.mountOrbitControls(props);
+
     this.renderScene();
   },
 
@@ -415,6 +419,14 @@ var THREEScene = React.createClass({
     }
   },
 
+  mountOrbitControls: function(props) {
+    if (props.orbitControls) {
+        if (!this.orbitControls) {
+          this.orbitControls = new props.orbitControls(this._THREEcamera);
+        }
+    }
+  },
+
   renderScene: function() {
     this._THREErenderer.render(this._THREEObject3D, this._THREEcamera);
   },