I want my model to rotate back to it's original position not reset

Discussion
, ,
1

I want my model to ratate back to it’s original position not reset just.
import { useRef, useState } from “react”;
import { useLoader } from “@react-three/fiber”;
import { GLTFLoader } from “three/examples/jsm/loaders/GLTFLoader.js”;
function Keyboard3d(props) {
const gltf = useLoader(GLTFLoader, “/cpkeyboard.glb”);
const meshRef = useRef();
const [hovered, hover] = useState(false);
const [clicked, click] = useState(false);
return (
<>
<mesh
{…props}
ref={meshRef}
scale={[1.3, 1.1, 1]} // Adjust the scale to increase the size of the model
position={[0.03, 0, 0]}
rotation={[Math.PI / 2.7, 0, 0]}
onPointerOver={(event) => (event.stopPropagation(), hover(true))}
onPointerOut={(event) => hover(false)}
>
<primitive object={gltf.scene} scale={0.1} position={[0, 0, 0]} />

</>
);
}
export default Keyboard3d;
and
<Canvas camera={{ position: [0, 0, 1.65], fov: 14.5 }}>

<pointLight position={[1, 1, 1]} />
<OrbitControls enableZoom={false} maxPolarAngle={Math.PI / 2} minPolarAngle={Math.PI / 2} ref={controlsRef} />




2

Not a 100% sure what you are saying. But if you mean you want it to continuously rotate. Then you need to continuously call your rotation + add some in an axis.
In javascript:

function animate() {
 // Add rotation to your model, something like yourmodel.rotation.x += 0.1
  requestAnimationFrame(animate);
}
animate();

I think react uses useFrame() ?

1 Like
3

No I dont want to continiously rotate
I want to rotate it but when i release the mouse my model must ROTATES back to its orignals

5

You can use <PresentationControls> for this which I’m sure uses react spring under the hood, see this example…

3 Likes
6

It worked Thank You So Much