three.js Rotate 3d model left and right slowly - three.js

Question

i'm trying to learn threejs but i've some difficult to understand how to rotate my 3d model.
now i'm able to rotate my model in a loop...but this is not what i want
i want to rotate my model a little bit to the right and then again a little bit to the left (in loop)..not at 360°.
or better ROTATE with mouse movement!
my code so far:
let container;
let camera;
let renderer;
let scene;
let computer;
function init(){
container = document.querySelector('.scene');
//creazione scena
scene = new THREE.Scene();
const fov = 35;
const aspect = container.clientWidth / container.clientHeight;
const near = 0.1;
const far = 1000;
// setup camera
camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
camera.position.set(0,2.8, 11);
// luci ambiente
const ambient = new THREE.AmbientLight(0x404040,3);
scene.add(ambient);
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1,1,0);
scene.add(light)
// renderer
renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
// caricamento modello 3d
let loader = new THREE.GLTFLoader();
loader.load('./3d/scene.gltf', function (gltf){
scene.add(gltf.scene);
computer = gltf.scene.children[0];
animate()
})
}
function animate(){
requestAnimationFrame(animate);
computer.rotation.z += 0.003;
computer.rotation.x = -1.2;
computer.position.y = -10
renderer.render(scene,camera);
}
init()
function onWindowResize(){
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(container.clientWidth, container.clientHeight);
}
window.addEventListener("resize", onWindowResize);

Answer 1

As an option, use mouse position in NDC to slightly rotate your model:
body{
overflow: hidden;
margin: 0;
}
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three#0.135.0";
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", () => {
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth, innerHeight);
});
let g = new THREE.CylinderGeometry(1, 2, 3, 4);
let m = new THREE.MeshNormalMaterial();
let o = new THREE.Mesh(g, m); // let's suppose it's your model
scene.add(o);
window.addEventListener("pointermove", event => {
let xMove = ( event.clientX / window.innerWidth ) * 2 - 1; // from the docs of Raycaster
if (o) { // in case you load a model, you need to check if it's not null or undefined
o.rotation.y = xMove * Math.PI * 0.1;
}
});
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});
</script>