New to the three.js library (and react-three-renderer).
As the title says: only renders geometry when wireframe property equals true. If wireframe property is false (default) I would expect the meshBasicMaterial color property to render a purple Hexagon.
I was able to successfully implement "simple" from r3r examples seen here: https://toxicfork.github.io/react-three-renderer-example/#/webgl_simple
All I've done is removed rotation and changed <boxGeometry />
to <geometry />
with custom vertices and faces
class Hexs 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;
const angle = 1.7320508075688767;
const h = angle * 0.5;
return (
<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>
<meshBasicMaterial
wireframe
color='purple'
/>
<geometry
vertices={[
new THREE.Vector3(0, 0, 3),
new THREE.Vector3(0, 1, 3),
new THREE.Vector3(h, 0.5, 3),
new THREE.Vector3(h, -0.5, 3),
new THREE.Vector3(0, -1, 3),
new THREE.Vector3(-h, -0.5, 3),
new THREE.Vector3(-h, 0.5, 3),
]}
faces={[
new THREE.Face3(0, 1, 2),
new THREE.Face3(0, 2, 3),
new THREE.Face3(0, 3, 4),
new THREE.Face3(0, 4, 5),
new THREE.Face3(0, 5, 6),
new THREE.Face3(0, 6, 1),
]}
/>
</mesh>
</scene>
</React3>
);
}
}
export default Hexs;