Merge branch 'master' into release/2.3

CHANGELOG.md

@@ -1,6 +1,17 @@
 CHANGELOG
 ===========
 
+## 2.3.3 ( [see diff](https://github.com/toxicFork/react-three-renderer/compare/v2.3.2...v2.3.3) )
+
+### Components
+- Added `<shapeGeometry>` ( #114 )
+- Fixed a bug which would cause a crash when you changed some properties on components
+ whose children used ref functions
+- Added `<bufferGeometry>` ( #105 #119 )
+
+### Core
+- Fixed bug which would not allow you to get a canvas reference through the `canvasRef` property in some conditions ( #115 )
+
 ## 2.3.2 ( [see diff](https://github.com/toxicFork/react-three-renderer/compare/v2.3.1...v2.3.2) )
 
 ### Docs

README.md

@@ -11,6 +11,8 @@ Would you like to know more? [See the wiki](https://github.com/toxicFork/react-t
 
 > Currently supported react version: `15.3.1` ( things break fast when you fly this close to the sun )
 
+> Currently supported three version: `0.79.0` ( need to update babel config to work better with rollup )
+
 [![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)
 
 [![npm](https://nodei.co/npm/react-three-renderer.svg?downloads=true)](https://nodei.co/npm/react-three-renderer/)
@@ -19,7 +21,7 @@ Installation
 ============
 
 ```
-npm install --save react react-dom three
+npm install --save react@15.3.1 react-dom@15.3.1 three@0.79.0
 npm install --save react-three-renderer
 ```
 

docs/src/Generator.js

@@ -66,7 +66,7 @@ function mockPropTypes() {
     constructor(type, isRequired = false) {
       this._type = type;
 
-      this._isRequired = !!isRequired;
+      this._isRequired = isRequired;
       if (!isRequired) {
         this.isRequired = new PropType(type, true);
       }

docs/src/internalComponentCategories.js

@@ -181,6 +181,9 @@ module.exports = {
           geometry: {
             isComponent: true,
           },
+          bufferGeometry: {
+            isComponent: true,
+          },
           boxGeometry: {
             isComponent: true,
           },
@@ -241,10 +244,12 @@ module.exports = {
           textGeometry: {
             isComponent: true,
           },
+          shapeGeometry: {
+            isComponent: true,
+          },
         },
         TODO: [
           'CubeGeometry', // BoxGeometry
-          'ShapeGeometry', // hmmm
         ],
       },
       Shapes: {

docs/src/internalComponents/bufferGeometry.js

@@ -0,0 +1,24 @@
+import DocInfo from '../DocInfo';
+
+class bufferGeometry extends DocInfo {
+  getIntro() {
+    return 'Creates a [THREE.BufferGeometry](http://threejs.org/docs/#Reference/Core/BufferGeometry)';
+  }
+
+  getDescription() {
+    return '';
+  }
+
+  getAttributesText() {
+    return {
+      name: '',
+      resourceId: '',
+      position: '',
+      normal: '',
+      color: '',
+      index: '',
+    };
+  }
+}
+
+module.exports = bufferGeometry;

docs/src/internalComponents/gridHelper.js

@@ -1,8 +1,8 @@
 import object3D from './object3D';
 
 class gridHelper extends object3D {
-  getDescription() {
-    return 'Creates a [THREE.AxisHelper](https://threejs.org/docs/index.html#Reference/Extras.Helpers/GridHelper)';
+  getIntro() {
+    return 'Creates a [THREE.GridHelper](https://threejs.org/docs/index.html#Reference/Extras.Helpers/GridHelper)';
   }
 
   getAttributesText() {

docs/src/internalComponents/shape.js

@@ -6,8 +6,9 @@ class shape extends DocInfo {
   }
 
   getDescription() {
-    return `Place this within [[<extrudeGeometry>|extrudeGeometry]]
-    or [<resources>](resources).`;
+    return `Place this within [[<extrudeGeometry>|extrudeGeometry]],
+    [[<shapeGeometry>|shapeGeometry]],
+    or [[<resources>|resources]].`;
   }
 
   getAttributesText() {

docs/src/internalComponents/shapeGeometry.js

@@ -0,0 +1,20 @@
+import geometry from './geometry';
+
+class shapeGeometry extends geometry {
+  getIntro() {
+    return 'Creates a [THREE.ShapeGeometry](https://threejs.org/docs/#Reference/Geometries/ShapeGeometry)';
+  }
+
+  getAttributesText() {
+    return {
+      ...super.getAttributesText(),
+
+      shapes: 'Array of shapes, or a single shape THREE.Shape',
+      curveSegments: 'Default is 12 (not used in three.js at the moment)',
+      material: 'Index of the material in a material list',
+      UVGenerator: 'A UV generator, defaults to ExtrudeGeometry\'s WorldUVGenerator',
+    };
+  }
+}
+
+module.exports = shapeGeometry;

src/lib/ElementDescriptorContainer.js

@@ -31,6 +31,7 @@ import TextureResourceDescriptor from './descriptors/Resource/TextureResourceDes
 import ShapeResourceDescriptor from './descriptors/Resource/ShapeResourceDescriptor';
 
 import GeometryDescriptor from './descriptors/Geometry/GeometryDescriptor';
+import BufferGeometryDescriptor from './descriptors/Geometry/BufferGeometryDescriptor';
 import BoxGeometryDescriptor from './descriptors/Geometry/BoxGeometryDescriptor';
 import SphereGeometryDescriptor from './descriptors/Geometry/SphereGeometryDescriptor';
 import ParametricGeometryDescriptor from './descriptors/Geometry/ParametricGeometryDescriptor';
@@ -51,6 +52,7 @@ import ExtrudeGeometryDescriptor from './descriptors/Geometry/ExtrudeGeometryDes
 import TubeGeometryDescriptor from './descriptors/Geometry/TubeGeometryDescriptor';
 import DodecahedronGeometryDescriptor from './descriptors/Geometry/DodecahedronGeometryDescriptor';
 import TextGeometryDescriptor from './descriptors/Geometry/TextGeometryDescriptor';
+import ShapeGeometryDescriptor from './descriptors/Geometry/ShapeGeometryDescriptor';
 
 import ShapeDescriptor from './descriptors/Geometry/Shapes/ShapeDescriptor';
 import MoveToDescriptor from './descriptors/Geometry/Shapes/MoveToDescriptor';
@@ -126,6 +128,7 @@ class ElementDescriptorContainer {
       texture: new TextureDescriptor(react3RendererInstance),
 
       geometry: new GeometryDescriptor(react3RendererInstance),
+      bufferGeometry: new BufferGeometryDescriptor(react3RendererInstance),
       boxGeometry: new BoxGeometryDescriptor(react3RendererInstance),
       sphereGeometry: new SphereGeometryDescriptor(react3RendererInstance),
       parametricGeometry: new ParametricGeometryDescriptor(react3RendererInstance),
@@ -146,6 +149,7 @@ class ElementDescriptorContainer {
       tubeGeometry: new TubeGeometryDescriptor(react3RendererInstance),
       dodecahedronGeometry: new DodecahedronGeometryDescriptor(react3RendererInstance),
       textGeometry: new TextGeometryDescriptor(react3RendererInstance),
+      shapeGeometry: new ShapeGeometryDescriptor(react3RendererInstance),
 
       shape: new ShapeDescriptor(react3RendererInstance),
       moveTo: new MoveToDescriptor(react3RendererInstance),

src/lib/InternalComponent.js

@@ -7,6 +7,10 @@ import emptyFunction from 'fbjs/lib/emptyFunction';
 import flattenChildren from 'react/lib/flattenChildren';
 import ReactCurrentOwner from 'react/lib/ReactCurrentOwner';
 import ReactInstrumentation from 'react/lib/ReactInstrumentation';
+
+import ReactElement from 'react/lib/ReactElement';
+import ReactRef from 'react/lib/ReactRef';
+
 import Flags from './React3ComponentFlags';
 
 import ID_PROPERTY_NAME from './utils/idPropertyName';
@@ -574,6 +578,30 @@ class InternalComponent {
     this.threeElementDescriptor.completePropertyUpdates(this._threeObject);
   }
 
+  _removeAllChildRefs() {
+    const renderedChildren = this._renderedChildren;
+
+    if (renderedChildren) {
+      const renderedChildrenKeys = Object.keys(renderedChildren);
+
+      for (let i = 0; i < renderedChildrenKeys.length; ++i) {
+        const name = renderedChildrenKeys[i];
+
+        const renderedChild = renderedChildren[name];
+
+        if (renderedChild && renderedChild._currentElement && renderedChild._currentElement.ref) {
+          ReactRef.detachRefs(renderedChild, renderedChild._currentElement);
+
+          renderedChild._currentElement = ReactElement.cloneElement(renderedChild._currentElement, {
+            ref: null,
+          });
+        }
+
+        renderedChild._removeAllChildRefs();
+      }
+    }
+  }
+
   /**
    * @see ReactDOMComponent.Mixin.unmountComponent
    */
@@ -582,6 +610,10 @@ class InternalComponent {
       this.threeElementDescriptor.componentWillUnmount(this._threeObject);
     }
 
+    if (this._forceRemountOfComponent) {
+      this._removeAllChildRefs(); // prevent attaching of refs to children
+    }
+
     this.unmountChildren(safely);
     React3ComponentTree.uncacheMarkup(this);
 

src/lib/React3.jsx

@@ -66,6 +66,20 @@ class React3 extends React.Component {
     this._render();
   }
 
+  componentWillReceiveProps(newProps) {
+    const lastProps = this.props;
+
+    if (lastProps.canvasRef !== newProps.canvasRef) {
+      if (lastProps.canvasRef) {
+        lastProps.canvasRef(null);
+      }
+
+      if (newProps.canvasRef) {
+        newProps.canvasRef(this._canvas);
+      }
+    }
+  }
+
   shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate;
 
   componentDidUpdate() {

src/lib/React3Instance.js

@@ -785,13 +785,10 @@ class React3DInstance {
     }
 
     if (contextLossExtension && this._canvas) {
-      this._canvas.addEventListener('webglcontextlost', () => {
-        // this should recreate the canvas
-        this._recreateCanvasCallback();
-      }, false);
-
       // noinspection JSUnresolvedFunction
       contextLossExtension.loseContext();
+
+      this._recreateCanvasCallback();
     } else {
       this._recreateCanvasCallback();
     }

src/lib/descriptors/Geometry/BufferGeometryDescriptor.js

@@ -0,0 +1,61 @@
+import THREE from 'three';
+import PropTypes from 'react/lib/ReactPropTypes';
+
+import GeometryDescriptorBase from './GeometryDescriptorBase';
+import propTypeInstanceOf from '../../utils/propTypeInstanceOf';
+
+class BufferGeometryDescriptor extends GeometryDescriptorBase {
+  constructor(react3RendererInstance) {
+    super(react3RendererInstance);
+
+    [
+      'vertices',
+      'colors',
+      'faceVertexUvs',
+      'faces',
+      'dynamic',
+    ].forEach(propName => {
+      this.removeProp(propName);
+    });
+
+    [
+      'position',
+      'normal',
+      'color',
+    ].forEach(attributeName => {
+      this.hasProp(attributeName, {
+        type: PropTypes.oneOfType([
+          propTypeInstanceOf(THREE.BufferAttribute),
+          propTypeInstanceOf(THREE.InterleavedBufferAttribute),
+        ]),
+        update(threeObject, attributeValue) {
+          if (attributeValue) {
+            threeObject.addAttribute(attributeName, attributeValue);
+          } else {
+            threeObject.removeAttribute(attributeName);
+          }
+        },
+        updateInitial: true,
+        default: undefined,
+      });
+    });
+
+    this.hasProp('index', {
+      type: PropTypes.oneOfType([
+        propTypeInstanceOf(THREE.BufferAttribute),
+        propTypeInstanceOf(THREE.InterleavedBufferAttribute),
+      ]),
+      update(threeObject, attributeValue) {
+        threeObject.setIndex(attributeValue);
+      },
+      updateInitial: true,
+      default: undefined,
+    });
+  }
+
+  construct() {
+    return new THREE.BufferGeometry();
+  }
+}
+
+module.exports = BufferGeometryDescriptor;