反應三個渲染器 <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