javascript - 3D obj 在任意轴上循环旋转 三个 js

Question

我试图制作一个导入的 3D 对象，使其在任何轴上连续旋转，如经典的立方体、球体等。但它不起作用，根本不移动，我不明白为什么。这是代码:

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;

感谢您的帮助。

Answer 1

对象的旋转仅更改一次:加载模型时。

如果你想连续旋转它，你需要每一帧更新它的旋转。因此，您应该将 object.rotation.x += 0.01 行移至 animate() 函数内。

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;