reactjs - react-three-fiber：旋转四面体“面朝下”

Question

我正在尝试旋转四面体，使它们的一侧朝下，就像它们放置在地板上的物理对象一样。

我希望这个 SO 答案能解决我的问题

通过为四面体提供 applyMatrix 属性应用接受的答案后，我的代码如下所示：

const Triangle = ({ position, color }) => {
  const mesh = useRef(null);
  return (
    <mesh castShadow ref={mesh} position={position}>
      <tetrahedronGeometry
        attach="geometry"
        args={[0.6, 0]}
        applyMatrix={new THREE.Matrix4().makeRotationAxis(
          new THREE.Vector3(2, 0, -1).normalize(),
          Math.atan(Math.sqrt(2))
        )}
      />
      <meshStandardMaterial attach="material" color={color} />
    </mesh>
  );
};

然而，我的四面体的旋转并没有改变。我究竟做错了什么？

这是我当前的代码：小提琴

Answer 1

applyMatrix 是一个函数。您正在用矩阵覆盖它。本质上你正在这样做：

const geom = new THREE.TetrahedronGeometry()
geom.applyMatrix = new THREE.Matrix4() 

在网格或几何体上放置一个参考，然后使用 useLayoutEffect 调用该函数。