More detailed docs needed.

[Tenkir]

I really want to use this library, but digging through the example code to figure out is frustrating. Better documentation would be very useful.

[Izzimach]

Most of the components correspond to a threejs object with a the same name and equivalent props/members. So you can use a lot of the threejs documentation to look up things like Object3D.

I agree it's a mess though. react-three started as a research/proof-of-concept and never really grew up into a real library. Did you want a list of the components? Or what the props mean for specific components?

[Tenkir]

I'm having an issue creating a mesh. I followed the examples, but can't figure out why React throws a 'cannot be null' error.

    const geometry = new THREE.SphereGeometry(5, 32, 32);
    const material = new THREE.MeshBasicMaterial({color: 0xffff00});

    const Moon = React.createElement(
      ReactTHREE.Mesh,
      {
        position: new THREE.Vector3(0,0,0),
        geometry: geometry,
        material: material
      }
    );

[Izzimach]

I pasted that into the render function of the Cupcake example (overwriting the original render) and it seemed to work fine, so it's probably something else.

Did you use the renderer/scene code from the Cupcake example?

Part of the problem with the examples is that Cupcake started out much simpler but got more complicated with animation and multiple scenes and other junk. There should probably a simpler example that just renders a static box or sphere without any fancy stuff.

[Tenkir]

I altered it to fit the ES6 extends component, but for the most part it's fine. I get the scene fine, I'm just not able to add anything to it.

  constructor(props) {
    super(props);

    this.state = {
      width: window.innerWidth,
      height: window.innerHeight
    };
  }

  render() {
    const Moon = React.createElement(
      ReactTHREE.Mesh,
      {
        position: new THREE.Vector3(0,0,0),
        geometry: new THREE.SphereGeometry(5, 32, 32),
        material: new THREE.MeshBasicMaterial({color: 0xffff00})
      }
    );

    const cameraprops = {
      fov : 30,
      aspect : this.state.width / this.state.height,
      near : 1,
      far : 5000,
      position : new THREE.Vector3(50,50,50),
      lookat : new THREE.Vector3(0,0,0)
    };

    return (
      <ReactTHREE.Renderer background={463812} width={this.state.width} height={this.state.height}>
        <ReactTHREE.Scene width={this.state.width} height={this.state.height} camera={this.state.camera}>
          <ReactTHREE.PerspectiveCamera name="maincamera" {...cameraprops} />
          <ReactTHREE.AxisHelper size={5}/>
          <Moon/>
        </ReactTHREE.Scene>
      </ReactTHREE.Renderer>
    );
  }

EDIT: I'm able to get it to work if I inline the moon element:

      <ReactTHREE.Renderer width={this.state.width} height={this.state.height}>
        <ReactTHREE.Scene width={this.state.width} height={this.state.height} camera="maincamera">
          <ReactTHREE.PerspectiveCamera name="maincamera" {...this.state.cameraProps} />
          <ReactTHREE.Mesh geometry={new THREE.SphereGeometry(10, 32, 32)} material={new THREE.MeshBasicMaterial({color: 0xffffff})}/>
        </ReactTHREE.Scene>
      </ReactTHREE.Renderer>

I've been referencing code from https://github.com/Izzimach/r3test/blob/85d281a58f79bf2919c7dff298ef6c5ab5ba98a5/src/components/CubeApp.js

Which I'm beginning to think might be outdated? I notice there's no Camera element in the render function, it's just being applied through the scene element from state.

[Izzimach]

Yeah, the r3test example is horribly out of date. I'll see about bringing it up to speed w.r.t. ES6 and newer redux-devtools.