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

【问题标题】：react-three-fiber: Rotate tetrahedron "face down"react-three-fiber：旋转四面体“面朝下”
【发布时间】：2020-11-08 06:15:31
【问题描述】：

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

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

【问题讨论】：

标签： reactjs three.js react-three-fiber

【解决方案1】：

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

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

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

【讨论】：