Cannot rotate mesh in React Three Fiber

user_9114195 0
Viewed 119

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?

react-three-drei react-three-fiber three.js reactjs
2 Answers

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

user_92314420

rotation arg is of type Euler and it takes a slice (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>
user_132853380
Related