在 Three.JS 中旋转带有“填充孔”的挤压形状

Question

我对 Three.js 还很陌生，所以如果我在这里遗漏了一些明显的东西，请原谅我。

我的问题设置如下：我有一个 2D 形状（例如矩形），其中有一些孔：

 const shape = new THREE.Shape();
 shape.moveTo(...);
 shape.lineTo(...);
 // ...

 const hole = new THREE.Shape();
 hole..moveTo(...);
 hole.lineTo(...);
 // ...

 shape.holes.push(new THREE.Path(hole.getPoints()));

然后我将此形状挤压为 3D，如下所示：

const height = ...;
const extrudeSettings = { depth: height };
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);

然后，该几何体围绕某些

angle

旋转一些

axis

：

const quaternion = new THREE.Quaternion().setFromAxisAngle(angle, axis);
geometry.applyQuaternion(quaternion);

最后，渲染几何体（使用react-三纤维）：

<>
 <mesh geometry={geometry}>
    <meshBasicMaterial
        color={red}
        side={THREE.FrontSide}
     />
 </mesh>
</>

我现在想用一种（或几种）不同的颜色填充这个几何体中的孔。

到目前为止，我的方法是通过挤压每个孔的底层 2D 形状，应用相同的旋转，然后将它们渲染为上面的“主要形状”，来创建孔的几何形状。然而，我始终无法让它们与原始形状中的孔对齐。

我的数学很可能刚刚失败。但是，如果有人知道实现此目标的更简单路径/已经做到了这一点，我将不胜感激您的任何见解。

Answer 1

我自己设法弄清楚了。结果

three.js

提供了一个

group

概念，可以完美地用于此目的。通过将主要形状和我想要在其孔中渲染的形状包装到一个组中，然后对该组应用所有必要的转换，我就能够同步转换它们。

我的代码看起来与此类似：

<group position={position}>
  <group rotation={rotation}>
    // Render main shape
    <mesh geometry={geometry}>
      <meshBasicMaterial
        color="red"
        side={THREE.FrontSide}
      />
    </mesh>
    // Render holes
    {holeGeometries.map(geometry =>
      <mesh geometry={geometry}>
        <meshBasicMaterial
          color="green"
          side={THREE.FrontSide}
        />
      </mesh>
     )}
  </group>
</group>