react-three-renderer <meshBasicMaterial> only renders geometry when wireframe property equals true

Question

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;

Answer 1

In three.js, front-faces have counter-clockwise winding order.

You have specified faces that are oriented to face away from your camera.

Either flip the winding order of each face of your hexagon, or specify a double-sided material.

three.js r.89