Skip to content
This repository has been archived by the owner on Jul 20, 2020. It is now read-only.

Using THREE.MeshLine library with react-three-renderer #233

Open
Venryx opened this issue Jul 30, 2018 · 1 comment
Open

Using THREE.MeshLine library with react-three-renderer #233

Venryx opened this issue Jul 30, 2018 · 1 comment

Comments

@Venryx
Copy link

Venryx commented Jul 30, 2018

How would one use the THREE.MeshLine library with react-three-renderer?

This was my attempt:

class MeshLineExample extends React.Component {
	render() {
		let meshLine = new MeshLine();

		var geometry = new THREE.Geometry();
		geometry.vertices = this.props.vertices;
		meshLine.setGeometry(geometry);

		var material = new MeshLineMaterial({});

		return (
			<mesh position={new THREE.Vector3(0, 0, 0)} rotation={new THREE.Euler()}
				geometry={geometry} material={material}/>
		);
	}
}

However, when I do this, nothing displays.

Also, I get these warnings in the console:
"Warning: Foreign prop geometry found in mesh. Check the render method of MeshLineExample."
"Warning: updating prop geometry ( [object Object] ) for MeshDescriptor"

I don't understand this, though, because I looked at the source code, and MeshDescriptor appears to supposed to be able to accept geometry and material props: https://github.com/toxicFork/react-three-renderer/blob/master/src/lib/descriptors/Object/MeshDescriptor.js#L9

Any tips on how to supply the <mesh> component/descriptor with a custom geometry and material?

@Venryx
Copy link
Author

Venryx commented Jul 30, 2018

Oh, apparently the code above is (basically) correct; I've got it working now.

I just needed to use: <mesh [...] geometry={meshLine.geometry} material={material}/>
Instead of: <mesh [...] geometry={geometry} material={material}/>

However, there is still the (minor) issue of those warnings shown in the console; I suppose the MeshDescriptor class needs to have this.hasProps(...) calls in its constructor, for the optional geometry and material props.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant