Loop Rotation on any axis for a 3D obj Three js

Question

I trying to make a an imported 3d object to rotate continuously on any axis like a classic cube, sphere etc.. But it don't work, not moving at all and I don't understand why. Here is the code:

var scene6, camera6, renderer6, light, shipMtl, shipObj;

function init() {
    scene6 = new THREE.Scene();
    camera6 = new THREE.PerspectiveCamera(35, 1, 1, 1000);
    camera6.position.z = 400;

    //LIGHTS
    light = new THREE.PointLight(0xffffff, 2, 0);
    light.position.set(200, 100, 300);
    scene6.add(light);


    //3D MODEL
    shipMtl = new THREE.MTLLoader();
    shipMtl.load('../models/spaceCraft1.mtl', function(materials) {
        materials.preload();
        shipObj = new THREE.OBJLoader();
        shipObj.setMaterials(materials);
        shipObj.load('../models/spaceCraft1.obj', function(object) {
            object.scale.set(10, 10, 10);
            object.rotation.x += .01;
            scene6.add(object);
        });
    });

    renderer6 = new THREE.WebGLRenderer({ canvas: document.getElementById('model'), antialias: true });
    renderer6.setClearColor(0x000000);
    renderer6.setPixelRatio(window.devicePixelRatio);

    animate6();
}

function animate6() {

    requestAnimationFrame(animate6);
    renderer6.render(scene6, camera6);

}

window.onload = init;

Thank you for your help.

Answer 1

The rotation of your object is only changed once : when the model is loaded.

If you want to continuously rotate it, you need to update its rotation every frame. Therefore, you should move the object.rotation.x += 0.01 line inside the animate() function.

var scene6, camera6, renderer6, light, shipMtl, shipObj;
var obj; // global reference to your model, once loaded

function init() {
    scene6 = new THREE.Scene();
    camera6 = new THREE.PerspectiveCamera(35, 1, 1, 1000);
    camera6.position.z = 400;

    //LIGHTS
    light = new THREE.PointLight(0xffffff, 2, 0);
    light.position.set(200, 100, 300);
    scene6.add(light);

    //3D MODEL
    shipMtl = new THREE.MTLLoader();
    shipMtl.load('../models/spaceCraft1.mtl', function(materials) {
        materials.preload();
        shipObj = new THREE.OBJLoader();
        shipObj.setMaterials(materials);
        shipObj.load('../models/spaceCraft1.obj', function(object) {
            object.scale.set(10, 10, 10);
            // no need to change the rotation here
            obj = object; // put your object as global
            scene6.add(object);
        });
    });

    renderer6 = new THREE.WebGLRenderer({ canvas: document.getElementById('model'), antialias: true });
    renderer6.setClearColor(0x000000);
    renderer6.setPixelRatio(window.devicePixelRatio);

    animate6();
}

function animate6() {
    requestAnimationFrame(animate6);

    obj.rotation.x += 0.01;

    renderer6.render(scene6, camera6);
}

window.onload = init;