How could I add some smooth transition to 3d car model using THREE.JS?

Question

I would like to add some smooth transition rotation to 3d car model after mouseleave canvas. Currently It happens imediately and looks bad. How could I add some smooth transition rotation to 3d car model using THREE.JS ? Whether I have to use diffrent library? I tried to find out how to do but I didn't find anything helpful. Below is my THREE JS code

   let scene;
            const container3d = document.querySelector(".car-3d");

            function init() {
                scene = new THREE.Scene();


                camera = new THREE.PerspectiveCamera(70, container3d.offsetWidth / container3d.offsetHeight, 1, 5000);

                camera.rotation.y = 45 / 180 * Math.PI;

                camera.position.x = 4.4;
                camera.position.y = 10.5;
                camera.position.z = 5.5;
                hlight = new THREE.AmbientLight(0x404040, 10);
                scene.add(hlight);

                directionalLight = new THREE.DirectionalLight(0xffffff, 2);
                directionalLight.position.set(0, 1, 0);
                directionalLight.castShadow = true;
                scene.add(directionalLight);

                light = new THREE.PointLight(0xc4c4c4, 3);
                light.position.set(0, 3, 10);
                scene.add(light);

                light2 = new THREE.PointLight(0xc4c4c4, 3);
                light2.position.set(10, 1, 0);
                scene.add(light2);

                light3 = new THREE.PointLight(0xc4c4c4, 3);
                light3.position.set(0, 1, -10);
                scene.add(light3);

                light4 = new THREE.PointLight(0xc4c4c4, 3);
                light4.position.set(-10, 3, 0);
                scene.add(light4);


                renderer = new THREE.WebGLRenderer({
                    alpha: true
                });
                renderer.setSize(container3d.offsetWidth, container3d.offsetHeight);
                document.body.appendChild(container3d);
                container3d.appendChild(renderer.domElement);

                let loader = new THREE.GLTFLoader();

                loader.load('scene.gltf', function (gltf) {
                    car = gltf.scene.children[0];
                    car.scale.set(1.8, 1.8, 1.8);
                    gltf.scene.position.set(0, 10, 0);
                    car.rotation.z = 0.35;
                    scene.add(gltf.scene);
                    animate();
                });
            }

            function animate() {
                requestAnimationFrame(animate);
                renderer.render(scene, camera);
                container3d.addEventListener("mousemove", (e) => {
                    let x = -(window.innerWidth - 2 * e.clientX) / 700;
                    car.rotation.z = x;

                })
                container3d.addEventListener("mouseleave", () => {
                    car.rotation.z = 0.35;
                    /* smooth transition*/
                })

            }
            init();

user_5250847 · Answer

I suggest you use an animation library like GSAP or tween.js since it allows you better control of the animation. Typical example code with GSAP would look like so:

let camera, scene, renderer;
let mesh;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 4;

  scene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshNormalMaterial();

  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  document.addEventListener('mouseleave', () => {

    gsap.to(mesh.rotation, {
      duration: 1,
      x: Math.PI * 0.25
    });

  });

}

function animate() {

  requestAnimationFrame(animate);
  renderer.render(scene, camera);

}

body {
      margin: 0;
}

How could I add some smooth transition to 3d car model using THREE.JS?

1 Answers