3d Model Object Rotation

Questions
,
1 
import * as THREE from 'https://cdn.skypack.dev/three@0.132.2';
import { OrbitControls } from 'https://cdn.skypack.dev/three@0.132.2/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://cdn.skypack.dev/three@0.132.2/examples/jsm/loaders/GLTFLoader.js';

let camera, scene, renderer, controls;

init();
animate();

function init(){
    const container = document.getElementById("myContainer");
    
    camera = new THREE.PerspectiveCamera(70, container.clientWidth / container.clientHeight, 2, 1000);
    camera.position.z = 8;
    camera.position.x = 8;
    camera.position.y = 5;

    scene = new THREE.Scene();

    const grid = new THREE.GridHelper( 50, 10, 0xffffff, 0xffffff );
        grid.material.opacity = 0.5;
        grid.material.depthWrite = false;
        grid.material.transparent = true;
        scene.add( grid );

    // material
    const red = new THREE.MeshStandardMaterial({color:0xff0000});

    //modal loader
    const loader = new GLTFLoader();
    loader.load("SampleShapes.gltf", (gltf) => {
        const model = gltf.scene;
        

// this is my color code
model.traverse((node) => {
    if (!node.isMesh) return;
    
    node.castShadow = true;
    node.receiveShadow = true;
    node.position.y  = 1;
    node.material = new THREE.MeshPhongMaterial({
        color: 0xff0000, shininess: 10
    });
  });
// end of my color code

      
        scene.add(model);
        model.rotation.y = Math.PI;
        

    },
    function (xhr) {
        console.log((xhr.loaded / xhr.total * 100)+ '% loaded');
    },
    function (error) {
        console.error ('an error happened', error);
    }
    );

    // Lights
    const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
    dirLight.position.set( -8, 12, 8 );
    dirLight.castShadow = true;
    dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
    // Add directional Light to scene    
    scene.add( dirLight );

    //renderer
    renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(container.clientWidth, container.clientHeight);
    renderer.setClearColor(0xffffff, 0);
    container.appendChild(renderer.domElement);

    //controls
    controls = new OrbitControls(camera, renderer.domElement);
    controls.target.set( 0, 0, 0 );
    controls.update();
    
    //axis Helper
    var axesHelper = new THREE.AxesHelper( 100 );
    scene.add( axesHelper );

    window.addEventListener('resize', onWindowResize);    
}

function onWindowResize() {
    camera.aspect = container.clientWidth / container.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(container.clientWidth, container.clientHeight);
}

function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}

I am trying to create rotation animation to my GLTF models… but it is not happening

2

That’s because you’re setting the rotation only once in your init() function, but are never changing it in between animation frames anymore…

1 Like
3

how to do that… can you please guide?

4

Take a look at this example, which you would have to slightly adapt for your purpose:

https://threejs.org/examples/#webgl_geometry_convex

Each example page as a small “<>” button in its lower right corner which, when clicked, brings you right to that examples source code page.

5

In the BeginnerExample step 3 from the Collection of examples from discourse.threejs.org an example.

See also LoadGLTFmove