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?
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>
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>
If you are using typescript, then you should try installing @types/three
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>
</>
);
