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

Question

I'm trying to rotate tetrahedrons so that they lie with one side facing downwards, like how they would be if they where physical objects that you placed on a floor.

I expected this SO answer to solve my problem

After applying the accepted answer by giving the tetrahedron the applyMatrix property, my code looked like this:

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>
  );
};

However, the rotation of my tetrahedrons did not change. What am I doing wrong?

This is my current code: fiddle

score 1 · Accepted Answer · answered Nov 07 '20 at 22:15

applyMatrix is a function. you are overwriting it with a matrix. essentially you're doing this:

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

put a ref on the mesh or the geometry, then use useLayoutEffect to call the function.

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

1 Answers1