3D obj Three js 在任何轴上的循环旋转 [英] Loop Rotation on any axis for a 3D obj Three js

问题描述

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

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;

感谢您的帮助.

推荐答案

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

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

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

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;

这篇关于3D obj Three js 在任何轴上的循环旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！