Rotate my model during 3 seconds

Questions
, ,
1

Hi i am brand new to three.js and i want to rotate my model during 3 seconds and stop it
Here is my code. Can you help me? Thank you!!

import * as THREE from './three.js-master/build/three.module.js';
// import { OrbitControls } from "./three.js-master/examples/jsm/controls/OrbitControls.js"
import { GLTFLoader } from "./three.js-master/examples/jsm/loaders/GLTFLoader.js"

class App {
    constructor() {
        const divContainer = document.querySelector("#webgl-container")
        this._divContainer = divContainer

        const renderer = new THREE.WebGLRenderer({ antialias: true })
        renderer.setPixelRatio(window.devicePixelRatio)
        divContainer.appendChild(renderer.domElement)

        this._renderer = renderer

        const scene = new THREE.Scene()

        this._setupCamera()
        this._setupLight()
        this._setupModel()


        
        window.onresize = this.resize.bind(this) 

        this.resize()
        
        requestAnimationFrame(this.render.bind(this))
    }


    _setupModel() {
        const gltfLoader = new GLTFLoader()
        const url = 'img/scene.gltf'
        gltfLoader.load(
            url, 
            (gltf) => {
                const tv = gltf.scene
                this._scene.add(tv)
                this._tv = tv
            }
        )
    }

    _setupCamera() {
        const camera = new THREE.PerspectiveCamera(
            75, 
            window.innerWidth / window.innerHeight, 
            0.1, 
            100
        );

        camera.position.z = 4
        this._camera = camera

        this._scene.add(this._camera)
    }

    _setupLight() {
        const color = 0xffffff
        const intensity = 1.6
        const light = new THREE.DirectionalLight(color, intensity)
        light.position.set(-1, 2, 4)
        this._scene.add(light);
    }

    render(time) {
        this._renderer.render(this._scene, this._camera)
        this.update(time)

        requestAnimationFrame(this.render.bind(this))
    }

    update(time) {
        time *= 0.001; // second unit
        this._tv.rotation.x = time
        this._tv.rotation.y = time
    }

    resize() {
        const width = this._divContainer.clientWidth
        const height = this._divContainer.clientHeight

        this._camera.aspect = width / height
        this._camera.updateProjectionMatrix()
        
        this._renderer.setSize(width, height)
    }
}

window.onload = function () {
    new App()
}
2

You can import gsap library and use to()-function:

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

JS:

const model = tv.getObjectByName('__root__') // get your gltf root-mesh
gsap.to(model .rotation, {
  duration: 3,
  y: model .rotation.y + Math.PI // rotate by 180° on y-axis
});