Cannot rotate mesh in React Three Fiber

Question

I have a Plane mesh, and I want to have it initialised with an initial rotation vector. However, setting the rotateX prop does not work.

<mesh rotateX={1}>
   <planeGeometry args={[5, 5, 64, 64]} />
   <meshStandardMaterial />
</mesh>

What am I doing wrong?

Answer 1

rotation arg is of type Euler and it takes a tuple (read array) of values:

As written in docs about Euler:

Euler( x : Float, y : Float, z : Float, order : String )

• x - (optional) the angle of the x axis in radians. Default is 0.
• y - (optional) the angle of the y axis in radians. Default is 0.
• z - (optional) the angle of the z axis in radians. Default is 0.
• order - (optional) a string representing the order that the rotations are applied, defaults to 'XYZ' (must be upper case).

For example, to rotate sphere by 90 deg around x axis, write the following:

<mesh rotation={[-Math.PI / 2, 0, 0]}>
  <planeGeometry args={[5, 5, 64, 64]} />
  <meshStandardMaterial />
</mesh>

Answer 2

In react three fiber you access the properties of an object using -. So it will be

<mesh rotation-x={1}>
   <planeGeometry args={[5, 5, 64, 64]} />
   <meshStandardMaterial />
</mesh>

Alternatively, you could pass the hole array [x, y, z].

 <mesh rotation={[1, 0, 0]}>
     <planeGeometry args={[5, 5, 64, 64]} />
     <meshStandardMaterial />
 </mesh>

Answer 3

You can use useRef() to refer to that plane, then rotate it in the useEffect hook by calling it.

Example :

const planeRef = useRef();
useEffect(() => {
    planeRef && planeRef.current.rotation.x = 1.0 * Math.PI/180; // to convert from Deg to Rad.

}, []);

...
return (
<>
<mesh ref={planeRef}>
   <planeGeometry args={[5, 5, 64, 64]} />
   <meshStandardMaterial />
</mesh>
</>
);

Answer 4

If you are using typescript, then you should try installing @types/three