How to mix with 2D react ? Would other 3d engines need similar hook up?

[Justinfront]

Hi I tried to use this as a subcomponent of a 2D react app but the webgl seemed to take over the context and a side menu bar I had just appeared grey.
New to react so not really sure how to set this up and was wondering how I might for instance adapt a default demo.
https://github.com/facebookincubator/create-react-app
To run say some flexbox controls in 2D html along side your 3D controls, would be great to see that in maybe a fork of "create-react-app", my collegue is using Reflux so ideally it might have that as well ;)
Wondering if you have looked at Riot and if it would be easier to embed 3d engines, also wondered on your choice of three over awayjs, I presume away3d or babylon would follow a similar structure pattern?

[Justinfront]

I was trying something like...

export default class Home extends Component {

  render() {
    const { selectItem } = this.props;
    return (
      <div className={styles.container}>
        <MainMenu selectItem={selectItem} 
                  selectedToolKey={this.props.menu_selected_key}
                  />
        <Three/>
      </div>
    );
  }
}
ReactDOM.render(<Three/>, ReactDom.findDomNode( this ) );

[toxicFork]

Hmm... Do you mean something like an 2d overlay? There are some attempts to do that, see https://www.npmjs.com/package/react-three-renderer-html3d by @Colmea :)

[Justinfront]

No was looking to have the 3D as a viewport with 2D app.

[toxicFork]

Ah I see... You should be able to use the component as any other... Can you post a link for the sidebar appearing gray issue? Perhaps the browser doesn't react well to having a webgl context in some cases

[Justinfront]

my company expect every github commit to go through them, so largely removed my opensource code in the summer ( all my haxe experiments ), some companies have what I consider arcane concepts, so I am not in a position to create a prototype at this time :(, which is crazy because I am only looking at react because they suggested. I think all I was doing though was creating your three viewport a couple of div's down, the only other aspect I can think of was the code was using vw and vh for layout of dimensions. Thank for the reply.

[toxicFork]

ah I understand. My expectations for it is to work like this:

render() {
    return (<div>
        <SomeComponent/>
        <React3
          mainCamera="camera"
          width={width}
          height={height}

          onAnimate={this._onAnimate}
        >
          <scene>
            <perspectiveCamera
              name="camera"
              fov={75}
              aspect={width / height}
              near={0.1}
              far={1000}

              position={this.cameraPosition}
            />
            <mesh
              rotation={this.state.cubeRotation}
            >
              <boxGeometry
                width={1}
                height={1}
                depth={1}
              />
              <meshBasicMaterial
                color={0x00ff00}
              />
            </mesh>
         </scene>
        </React3>
        <SomeOtherComponent/>
    </div>);
}

However if that is causing some side effects then it may be a problem of the browser, or a really bad bug in react-three-renderer :) In either case, seeing an example of it should help us resolve it.

If it is not feasible to create an example but r3r still has issues for you, you could use threejs itself, for example...

render() {
    return (<div ref="myDiv"/>);
}

And then in componentDidMount :

componentDidMount() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    this.refs.myDiv.appendChild( renderer.domElement );

    // handle threejs stuff here
}

Same goes for other renderers, e.g. for babylon:

render() {
    return (<div>
        <canvas ref="canvas" />
    </div>);
}

componentDidMount() {
    var engine = new BABYLON.Engine(this.refs.canvas, true);
}