反应三个渲染器 <meshBasicMaterial> 仅当线框属性等于true时才渲染几何

Question

three.js库的新功能（和react-three-renderer）。

如标题所述：仅在wireframe属性等于true时才渲染几何。 如果wireframe属性为false（默认值），则期望meshBasicMaterial颜色属性呈现紫色Hexagon。

我能够从这里看到的r3r示例成功实现“简单”： https ://toxicfork.github.io/react-three-renderer-example/#/webgl_simple

我所要做的就是删除旋转并将具有自定义顶点和面的<boxGeometry />更改为<geometry />

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

在three.js中，正面具有逆时针缠绕顺序。

您指定的脸部朝向远离相机的方向。

翻转六角形每个面的缠绕顺序，或指定双面材料。

three.js r.89