CODEWITHSUNDEEP
reactjsthree.jsreact-three-fiberreact-three-drei
Sohail Saha
Sohail Saha

Reputation: 573

Cannot rotate mesh in React Three Fiber

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?

Upvotes: 5

Views: 11373

Answers (4)

iamkirill
iamkirill

Reputation: 379

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>

Upvotes: 7

Mahmoud Mohamed Ouf
Mahmoud Mohamed Ouf

Reputation: 39

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

Upvotes: -1

Maksym Shokin
Maksym Shokin

Reputation: 184

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>

Upvotes: 7

JULURI SAICHANDU
JULURI SAICHANDU

Reputation: 19

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

Upvotes: 0

Related Questions