Question

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

如标题所示：仅在线框属性等于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

react-three-renderer <meshbasicmaterial>仅在线框属性等于true

1 个答案: