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>