From 53a4aa5331ee4d9758569417924087641dda9323 Mon Sep 17 00:00:00 2001 From: Gary Haussmann Date: Sun, 18 Oct 2015 12:29:25 -0600 Subject: [PATCH] Pass context through THREEScene. fix #48 --- karma.conf-withrender.js | 3 +- src/components/THREEScene.js | 34 +++++++++------- src/mixins/THREEContainerMixin.js | 8 ---- test/components/scene.js | 66 +++++++++++++++++++++++++++++++ 4 files changed, 86 insertions(+), 25 deletions(-) diff --git a/karma.conf-withrender.js b/karma.conf-withrender.js index 8dd6e5e..2b88732 100644 --- a/karma.conf-withrender.js +++ b/karma.conf-withrender.js @@ -5,9 +5,8 @@ var test_render_files = [ 'build/react-three.js', 'test/createTestFixtureMountPoint.js', // why did I make this filename so long/ 'test/basics/*.js', - - 'node_modules/resemblejs/resemble.js', 'test/components/*.js', + 'node_modules/resemblejs/resemble.js', 'test/pixels/pixelTests.js', {pattern:'test/pixels/*.png',included:false, served:true} // for render tests ]; diff --git a/src/components/THREEScene.js b/src/components/THREEScene.js index 81463dd..b4ac095 100644 --- a/src/components/THREEScene.js +++ b/src/components/THREEScene.js @@ -68,10 +68,9 @@ var THREEScene = React.createClass({ }, componentDidMount() { - var renderelement = ReactDOM.findDOMNode(this); - var props = this.props; - -// var instance = this._reactInternalInstance._renderedComponent; + let renderelement = ReactDOM.findDOMNode(this); + let props = this.props; + let context = this._reactInternalInstance._context; this._THREEObject3D = new THREE.Scene(); this._THREErenderer = new THREE.WebGLRenderer({ @@ -87,14 +86,17 @@ var THREEScene = React.createClass({ this._THREErenderer.setSize(+props.width, +props.height); this._THREEraycaster = new THREE.Raycaster(); //this.setApprovedDOMProperties(props); - THREEObject3DMixin.applyTHREEObject3DPropsToObject(this._THREEObject3D, {}, props); + THREEObject3DMixin.applyTHREEObject3DPropsToObject(this._THREEObject3D, {}, props); + + console.log(context); var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(); transaction.perform( - this.mountAndAddChildrenAtRoot, - this, - props.children, - transaction + this.mountAndAddChildren, + this, + props.children, + transaction, + context ); ReactUpdates.ReactReconcileTransaction.release(transaction); @@ -175,7 +177,8 @@ var THREEScene = React.createClass({ }, componentDidUpdate(oldProps) { - var props = this.props; + let props = this.props; + let context = this._reactInternalInstance._context; if (props.pixelRatio != oldProps.pixelRatio) { this._THREErenderer.setPixelRatio(props.pixelRatio); @@ -197,12 +200,13 @@ var THREEScene = React.createClass({ THREEObject3DMixin.applyTHREEObject3DPropsToObject(this._THREEObject3D, oldProps, props); - var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(); + let transaction = ReactUpdates.ReactReconcileTransaction.getPooled(); transaction.perform( - this.updateChildrenAtRoot, - this, - this.props.children, - transaction + this.updateChildren, + this, + this.props.children, + transaction, + context ); ReactUpdates.ReactReconcileTransaction.release(transaction); diff --git a/src/mixins/THREEContainerMixin.js b/src/mixins/THREEContainerMixin.js index 55284a2..5d230d4 100644 --- a/src/mixins/THREEContainerMixin.js +++ b/src/mixins/THREEContainerMixin.js @@ -45,10 +45,6 @@ var THREEContainerMixin = assign({}, ReactMultiChild.Mixin, { this._updateChildren(nextChildren, transaction, context); }, - updateChildrenAtRoot: function (nextChildren, transaction) { - this.updateChildren(nextChildren, transaction, emptyObject); - }, - // called by any container component after it gets mounted mountAndAddChildren: function(children, transaction, context) { var mountedImages = this.mountChildren( @@ -66,10 +62,6 @@ var THREEContainerMixin = assign({}, ReactMultiChild.Mixin, { i++; } } - }, - - mountAndAddChildrenAtRoot: function(children, transaction) { - this.mountAndAddChildren(children, transaction, emptyObject); } }); diff --git a/test/components/scene.js b/test/components/scene.js index 0dad58b..e401c38 100644 --- a/test/components/scene.js +++ b/test/components/scene.js @@ -38,4 +38,70 @@ describe("THREE Scene Component", function() { expect(mountpoint.childNodes.length).toBe(0); }); + + it("passes the context down into threejs elements", function() { + + // this component is an object that uses the x/y/z from the context to position the object + var Object3DFromContext = React.createClass({ + displayName:'Object3D_PositionFromContext', + contextTypes: { + position_context: React.PropTypes.any + }, + render: function() { + console.log(this.context); + return React.createElement( + ReactTHREE.Object3D, + {position: this.context.position_context} + ); + } + }); + + // this component creates a context that contains the desired position + var TestFixtureWithContext = React.createClass({ + displayName:'TestFixtureWithContext', + childContextTypes: { + position_context: React.PropTypes.any + }, + getChildContext: function() { + return { + position_context: new THREE.Vector3( + this.props.mesh_x, + this.props.mesh_y, + this.props.mesh_z + ) + }; + }, + render: function() { + var sceneprops = {width:this.props.width, height:this.props.height, ref:'scene'}; + + // note that object3d x/y/z are not passed down in the props, but must + // be obtained from the context + return React.createElement(ReactTHREE.Scene, + sceneprops, + React.createElement(Object3DFromContext) + ); + } + }); + + var contextcomponent = React.createElement( + TestFixtureWithContext, + { + width: 300, + height: 300, + mesh_x: 51, + mesh_y: 52, + mesh_z: 53 + }); + + var reactinstance = ReactTHREE.render(contextcomponent, mountpoint); + + // if the context was passed in the sprite x/y should have been + // determined by the x/y values in the context + var scene = reactinstance.refs.scene._THREEObject3D; + expect(scene.children[0].position.x).toBe(51); + expect(scene.children[0].position.y).toBe(52); + expect(scene.children[0].position.z).toBe(53); + + }); + });