react-three-renderer

react-three-renderer copied to clipboard

I noticed that the standard THREE-JS way of attaching data to mesh objects will blow up react-three-js.

object3dVariable.userData ={ whatever stuff you want}

You can get around this problem by declaring something like:

object3dVariable.userDataA ={ whatever stuff you want}

Where object3dVariable is a ref of a mesh.

However this breaks from standard THREE-JS conventions. It may be impossible for the repo to operate without doing this. So perhaps include a warning in docs such as: using userData in react-three-renderer refs will cause an error, instead use userDataA.

Or the repo could be refactored to use a variable name that won't cause conflicts. Such as reactThreeRendInfo.

Original Code that caused error:

componentDidMount(){
        let self = this;
        // user data is three js user info that can be attached to object3d
        // we do this input system because viewport raycasts to object and fires off click event
        this.boundBox.userDataA = {
            onClick: function (event) {
                self.onStartMovement(event);
           }
        }
    }
    render() {
      return <object3D>
            <mesh   position={this.props.position}
                    name="handler:position"
                    key="boundBox"
                    ref={(item )=> this.boundBox = item}>
                <boxGeometry
                    width={2}
                    height={2}
                    depth={0.1}/>
                <meshLambertMaterial color={0xffffff} depthTest={false} transparent={true} opacity={0}/>
            </mesh>
           <SvgVisual key="anchor"
                       position={this.props.position}
                       iconName={'icon-four-way-arrow'}
                      strokeColor={0xffffff}
                       fillColor={0x000000}
                       size={2}
                       fill={true}/>
        </object3D>;
    }

I need to store some data in an Object, and according to the Three.js docs I'm supposed to use userData. However I don't think this is exposed in react-three-renderer. I've tried doing <group userData={{test: 'test'}} >

Yes unfortunately it is not exposed yet in r3r, I can think of some ways to fix this, either with an userData attribute or by making r3r use something other than userData.

While I am not manually changing the userData, I think I run into a related problem in https://github.com/toxicFork/react-three-renderer/issues/57#issuecomment-333309313