反应三纤维：旋转四面体"face down"

Question

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

I expected this SO answer to solve my problem

通过为四面体提供 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>
  );
};

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

这是我当前的代码：fiddle

Answer 1

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

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

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

反应三纤维：旋转四面体"face down"

react-three-fiber: Rotate tetrahedron "face down"

three.js

reactjs

react-three-fiber