Update to threejs 0.83

package.json

@@ -32,7 +32,7 @@
   "peerDependencies": {
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
-    "three": "^0.74.0"
+    "three": "^0.83.0"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
@@ -56,7 +56,7 @@
     "react-dom": "^15.4.1",
     "resemblejs": "^2.2.0",
     "rimraf": "~2.5.0",
-    "three": "^0.74.0",
+    "three": "^0.83.0",
     "webpack": "^1.12.1",
     "webpack-dev-server": "~1.14.1"
   },

src/Constants.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 
 export default {
 

src/Utils.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import assign from 'object-assign';
 import warning from 'fbjs/lib/warning';
 
@@ -27,7 +27,7 @@ export function setNewLightColor(targetColor, sourceValue) {
   // function to set a light color. The sourcevalue
   // can be either a number (usually in hex: 0xff0000)
   // or a THREE.Color
-  
+
   // is the prop a hex number or a THREE.Color?
   if (typeof sourceValue === 'number') {
     targetColor.setHex(sourceValue);

src/components/THREERenderer.js

@@ -3,7 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactUpdates from 'react-dom/lib/ReactUpdates';
 import warning from 'fbjs/lib/warning';
-import THREE from 'three';
+import * as THREE from 'three';
 import THREEContainerMixin from '../mixins/THREEContainerMixin';
 
 import EventPluginHub from 'react-dom/lib/EventPluginHub';

src/components/THREEScene.js

@@ -2,7 +2,7 @@ import ReactMount from 'react-dom/lib/ReactMount';
 import { listenTo } from 'react-dom/lib/ReactBrowserEventEmitter';
 import EventPluginHub from 'react-dom/lib/EventPluginHub';
 
-import THREE from 'three';
+import * as THREE from 'three';
 import THREEObject3DMixin from '../mixins/THREEObject3DMixin';
 import {createTHREEComponent} from '../Utils';
 
@@ -76,15 +76,15 @@ var THREEScene = createTHREEComponent(
 
       this._THREEMetaData.camera = camera;
     },
-    
+
     bindOrbitControls: function(inst, canvas, props) {
       if (props.orbitControls && typeof props.orbitControls === 'function') {
         if (!this._THREEMetaData.orbitControls && canvas) {
           this._THREEMetaData.orbitControls = new props.orbitControls(this._THREEMetaData.camera, canvas);
         }
       }
     },
-    
+
     bindPointerEvents: function (inst, canvas, props) {
       if (props.pointerEvents) {
         if (canvas) {

src/components/cameras/THREEOrthographicCamera.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import { createTHREEComponent } from '../../Utils';
 import THREEObject3DMixin from '../../mixins/THREEObject3DMixin';
 

src/components/cameras/THREEPerspectiveCamera.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import { createTHREEComponent } from '../../Utils';
 import THREEObject3DMixin from '../../mixins/THREEObject3DMixin';
 

src/components/extras/THREEDecoratorHelper.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import { createTHREEComponent } from '../../Utils';
 import THREEObject3DMixin from '../../mixins/THREEObject3DMixin';
 import _ from 'lodash';
@@ -27,7 +27,7 @@ export default createTHREEComponent(
       // figure out which helpers to add and remove
       let helperAddTypeList = _.differenceWith(newHelperTypes, currentHelpers, (a,b) => b instanceof a);
       let helperRemoveList = _.differenceWith(currentHelpers, newHelperTypes, (a,b) => a instanceof b);
-      
+
       for (let newHelperType of helperAddTypeList) {
         let newHelper = new newHelperType(helperWrapNode);
         currentHelpers.push(newHelper);
@@ -68,7 +68,7 @@ export default createTHREEComponent(
         }
       }
     },
-    
+
     unmountComponent() {
       this.applyHelpers([]); // should remove all helpers
       THREEObject3DMixin.unmountComponent.call(this);

src/components/lights/CommonShadowmapProps.js

@@ -1,13 +1,50 @@
-module.exports = [
-    'shadowCameraNear',
-    'shadowCameraFar',
+
+
+const shadowPropNames = [
+//    'shadowCameraNear', // moved
+//    'shadowCameraFar', // moved
     'shadowCameraVisible',
-    'shadowBias',
-    'shadowDarkness',
-    'shadowMapWidth',
-    'shadowMapHeight',
+//    'shadowBias', // kmoved
+//    'shadowDarkness', // removed
+//    'shadowMapWidth', // moved
+//    'shadowMapHeight', // moved
     'shadowMap',
-    'shadowMapSize',
+//    'shadowMapSize', // moved? did this ever exist?
     'shadowCamera',
     'shadowMatrix'
 ];
+
+export default function tranferCommonShadowmapProps(THREEObject3D, newProps)
+{
+  if (typeof THREEObject3D.shadow === 'undefined') {
+    // ??? issue a warning?
+    return;
+  }
+
+  // props that reference inner object values
+  if (typeof newProps.shadowBias !== 'undefined') {
+    THREEObject3D.shadow.bias = newProps.shadowBias;
+  }
+  if (typeof newProps.shadowMapWidth !== 'undefined') {
+    THREEObject3D.shadow.mapSize.width = newProps.shadowMapWidth;
+  }
+  if (typeof newProps.shadowMapHeight !== 'undefined') {
+    THREEObject3D.shadow.mapSize.height = newProps.shadowMapHeight;
+  }
+  if (typeof newProps.shadowCameraFar !== 'undefined') {
+    THREEObject3D.shadow.camera.far = newProps.shadowCameraFar;
+  }
+  if (typeof newProps.shadowCameraNear !== 'undefined') {
+    THREEObject3D.shadow.camera.near = newProps.shadowCameraNear;
+  }
+  if (typeof newProps.shadowCameraFov !== 'undefined') {
+    THREEObject3D.shadow.camera.fov = newProps.shadowCameraFov;
+  }
+
+  // normal props we can transfer by name
+  shadowPropNames.forEach(function(propname) {
+    if (typeof newProps[propname] !== 'undefined') {
+      THREEObject3D[propname] = newProps[propname];
+    }
+  });
+}

src/components/lights/THREEAmbientLight.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import { createTHREEComponent } from '../../Utils';
 import THREEObject3DMixin from '../../mixins/THREEObject3DMixin';
 import LightObjectMixin from '../../mixins/LightObjectMixin';

src/components/lights/THREEAreaLight.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import { createTHREEComponent } from '../../Utils';
 import THREEObject3DMixin from '../../mixins/THREEObject3DMixin';
 import LightObjectMixin from '../../mixins/LightObjectMixin';
@@ -28,4 +28,3 @@ var THREEAreaLight = createTHREEComponent(
 );
 
 export default THREEAreaLight;
-

src/components/lights/THREEDirectionalLight.js

@@ -1,9 +1,8 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import { createTHREEComponent } from '../../Utils';
 import THREEObject3DMixin from '../../mixins/THREEObject3DMixin';
 import LightObjectMixin from '../../mixins/LightObjectMixin';
-
-var CommonShadowmapProps = require('./CommonShadowmapProps');
+import transferCommonShadowmapProps from './CommonShadowmapProps';
 
 var THREEDirectionalLight = createTHREEComponent(
   'DirectionalLight',
@@ -16,7 +15,7 @@ var THREEDirectionalLight = createTHREEComponent(
     applySpecificTHREEProps: function(oldProps, newProps) {
       LightObjectMixin.applySpecificTHREEProps.call(this, oldProps, newProps);
 
-      this.transferTHREEObject3DPropsByName(oldProps, newProps, CommonShadowmapProps);
+      transferCommonShadowmapProps(this._THREEObject3D, newProps);
 
       this.transferTHREEObject3DPropsByName(oldProps, newProps,
                                             ['target',
@@ -41,4 +40,3 @@ var THREEDirectionalLight = createTHREEComponent(
 );
 
 export default THREEDirectionalLight;
-

src/components/lights/THREEHemisphereLight.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import {createTHREEComponent, setNewLightColor} from '../../Utils';
 import THREEObject3DMixin from '../../mixins/THREEObject3DMixin';
 import LightObjectMixin from '../../mixins/LightObjectMixin';
@@ -10,15 +10,15 @@ var THREEHemisphereLight = createTHREEComponent(
     createTHREEObject: function() {
       return new THREE.HemisphereLight(0x8888ff, 0x000000, 1);
     },
-    
+
     applySpecificTHREEProps: function(oldProps, newProps) {
       LightObjectMixin.applySpecificTHREEProps.call(this, oldProps, newProps);
-      
+
       // sky color gets mapped to 'color'
       if (typeof newProps.skyColor !== 'undefined') {
         setNewLightColor(this._THREEObject3D.color, newProps.skyColor);
       }
-      
+
       this.transferTHREEObject3DPropsByName(oldProps, newProps,
                                             ['groundColor',
                                              'intensity']);

src/components/lights/THREEPointLight.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import { createTHREEComponent } from '../../Utils';
 import THREEObject3DMixin from '../../mixins/THREEObject3DMixin';
 import LightObjectMixin from '../../mixins/LightObjectMixin';

src/components/lights/THREESpotLight.js

@@ -1,9 +1,8 @@
-var THREE = require('three');
-var createTHREEComponent = require('../../Utils').createTHREEComponent;
-var THREEObject3DMixin = require('../../mixins/THREEObject3DMixin');
-var LightObjectMixin = require('../../mixins/LightObjectMixin');
-
-var CommonShadowmapProps = require('./CommonShadowmapProps');
+import * as THREE from 'three';
+import { createTHREEComponent } from '../../Utils';
+import THREEObject3DMixin from '../../mixins/THREEObject3DMixin';
+import LightObjectMixin from '../../mixins/LightObjectMixin';
+import transferCommonShadowmapProps from './CommonShadowmapProps';
 
 var THREESpotLight = createTHREEComponent(
     'SpotLight',
@@ -16,7 +15,8 @@ var THREESpotLight = createTHREEComponent(
         applySpecificTHREEProps: function(oldProps, newProps) {
             LightObjectMixin.applySpecificTHREEProps.call(this, oldProps, newProps);
 
-            this.transferTHREEObject3DPropsByName(oldProps, newProps, CommonShadowmapProps);
+
+            transferCommonShadowmapProps(this._THREEObject3D, newProps);
             this.transferTHREEObject3DPropsByName(oldProps, newProps,
                 ['target',
                     'intensity',
@@ -30,4 +30,4 @@ var THREESpotLight = createTHREEComponent(
     }
 );
 
-module.exports = THREESpotLight;
+module.exports = THREESpotLight;

src/components/objects/THREEAxisHelper.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import { createTHREEComponent } from '../../Utils';
 import THREEObject3DMixin from '../../mixins/THREEObject3DMixin';
 

src/components/objects/THREELine.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import { createTHREEComponent } from '../../Utils';
 import THREEObject3DMixin from '../../mixins/THREEObject3DMixin';
 
@@ -18,4 +18,3 @@ var THREELine = createTHREEComponent(
 );
 
 export default THREELine;
-

src/components/objects/THREELineSegments.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import { createTHREEComponent } from '../../Utils';
 import THREEObject3DMixin from '../../mixins/THREEObject3DMixin';
 

src/components/objects/THREEMesh.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import { createTHREEComponent } from '../../Utils';
 import THREEObject3DMixin from '../../mixins/THREEObject3DMixin';
 
@@ -29,4 +29,3 @@ var THREEMesh = createTHREEComponent(
 );
 
 export default THREEMesh;
-

src/components/objects/THREEPointCloud.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import { createTHREEComponent } from '../../Utils';
 import THREEObject3DMixin from '../../mixins/THREEObject3DMixin';
 

src/components/objects/THREESkinnedMesh.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import { createTHREEComponent } from '../../Utils';
 import THREEObject3DMixin from '../../mixins/THREEObject3DMixin';
 

src/components/objects/THREESprite.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import { createTHREEComponent } from '../../Utils';
 import THREEObject3DMixin from '../../mixins/THREEObject3DMixin';
 

src/mixins/THREEObject3DMixin.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import assign from 'object-assign';
 import THREEContainerMixin from './THREEContainerMixin';
 import warning from 'fbjs/lib/warning';
@@ -126,7 +126,7 @@ var THREEObject3DMixin = assign({}, THREEContainerMixin, {
     var props = this._currentElement.props;
     this._nativeParent = nativeParent;
     this._nativeContainerInfo = nativeContainerInfo;
-    
+
     /* jshint unused: vars */
     this._THREEObject3D = this.createTHREEObject(arguments);
     this._THREEObject3D.userData = this;