unmounting scenes in react 15

[eeh]

I am having trouble with react 15 when unmounting 3d scenes.

two parts: EventPluginHub.js:153 Uncaught TypeError: Cannot read property '_rootNodeID' of null

and then

an infinite loop of

react-three-commonjs.js:1157 Uncaught TypeError: Cannot convert undefined or null to objectrenderScene @ react-three-commonjs.js:1157rapidrender @ react-three-commonjs.js:1090

Any ideas?

[Izzimach]

Hm, there is already for removing the scene so I'm sure what is different here. Do you have some sample code to repro this?

[eeh]

Let me get to work on some sample code.

[eeh]

Ok, managed to reproduce in a minimal react app. Problem occurs when I navigate away from the 3d component, an infinite loop of error messages, (same as above) and browser hangs.

import React, { Component,PropTypes } from 'react';
import ReactDOM from 'react-dom';

import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router';

import THREE from 'three';

import { Renderer, Scene, AmbientLight, PerspectiveCamera, PointLight, Mesh} from 'react-three';

let Main = (props) => {
    return  (
        <div>This is Main!
            <div><Link to="componentA"> Link to A</Link></div>
            <div><Link to="componentB"> Link to B</Link></div>
            <div>{props.children}</div>
        </div>
    );
};

let ComponentA = (props) => {
    return <div>This is Component A, which is just a text component</div>
};

let ComponentB = (props) => {
    return  (
        <div>
            <div>This is Component B, having a 3d model</div>
            <Renderer width={200} height={200} >
                <Scene width={200} height={200} camera="maincamera">
                    <PerspectiveCamera name="maincamera" fov={75} aspect={1} near={1} far={10} position={new THREE.Vector3(3,3,3)} lookat={new THREE.Vector3(0,0,0)} />
                    <AmbientLight color={new THREE.Color(0xa0a0a0)} intensity={0.8}  />
                    <Mesh geometry={new THREE.SphereGeometry(2,32)} material={new THREE.MeshBasicMaterial({color:0xffffff})} />
                </Scene>
            </Renderer>
        </div>
    );
};

ReactDOM.render(
    <div>
        <Router history={browserHistory}>
            <Route path="/" component={Main}>
                <Route path="componentA" component={ComponentA}/>
                <Route path="componentB" component={ComponentB}/>
            </Route>
        </Router>
    </div>
    ,
    document.getElementById('root')
);

package.json:

{
  "name": "three-debug",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.0.1",
    "react-dom": "^15.0.1",
    "react-router": "^2.2.2",
    "react-three": "^0.9.0",
    "three": "^0.75.0"
  }
}

Anything i'm doing wrong?

[Izzimach]

Thanks for the example! Looks like the listener data structures got changed a bit. Probably the test suite just swallowed the errors or something. Shouldn't be too hard to fix.

[Izzimach]

Fix in cf1d04908438ae4a54e82bb66908ad35b1d75aa0

[Izzimach]

See if v 0.9.1 fixes this, thanks.

[eeh]

Looking forward to checking that out on Monday!

Thanks for taking your time!

[eeh]

Couldn't help myself, had to test it.

Works excellent. Thanks again.