CODEWITHSUNDEEP
javascriptreactjsthree.js
Scotty H
Scotty H

Reputation: 6714

react-three-renderer polyhedronGeometry error

I'm using react-three-renderer for a project. I'm creating meshes for display.

Based off of this example from the react-three-renderer wiki, I made this:

var React = require('react');
var ReactDOM = require('react-dom');
var THREE = require('three');
var React3 = require('react-three-renderer');

class Simple extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.cameraPosition = new THREE.Vector3(0, 0, 5);
  }

  render() {
    const width = window.innerWidth;
    const height = window.innerHeight;

    return (<React3
      mainCamera="camera"
      width={width}
      height={height}
    >
      <scene>
        <perspectiveCamera
          name="camera"
          fov={75}
          aspect={width / height}
          near={0.1}
          far={1000}

          position={this.cameraPosition}
        />
        <mesh key={0}>
            <polyhedronGeometry 
                vertices={[0,1.5,0,36.188,0,0,0,0,0,36.188,1.5,0,0,0,3.5,36.188,0,3.5,0,1.5,3.5,36.188,1.5,3.5]}
                indices={[0,1,2,3,1,0,4,1,5,2,1,4,6,2,4,0,2,6,6,3,0,7,3,6,3,5,1,7,5,3,7,4,5,6,4,7]} 
                detail={2} 
                radius={18.178430515311273} 
                name="B1" />
            <meshBasicMaterial color={0x00ff00} />
        </mesh>
      </scene>
    </React3>);
  }
}

ReactDOM.render(<Simple/>, document.getElementById('viewport'));

I got the example to work verbatim, but when I change out the <boxGeometry/> for a <polyhedronGeometry> (see documentation), I get this error:

threeObject.userData._triggerRemount is not a function.

What is causing this and what can I do to fix it?

Upvotes: 1

Views: 215

Answers (1)

toxicFork
toxicFork

Reputation: 61

This is a bug and it will be fixed, see the issue on Github. Technical details: when you modify some props on certain types such as Polyhedron Geometry, it will trigger a remount of the component to recreate the geometry object and let threejs now that there's a new geometry. In this case the library developer (me) forgot to handle an edge case that happens during initial construction of the object.

Upvotes: 2

Related Questions