3Dオブジェクトの任意の軸でのループ回転Three 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

オブジェクトの回転は、モデルがロードされたときに1回だけ変更されます。

継続的に回転させたい場合は、回転ごとにを更新する必要があります。したがって、animate()機能内のobject.rotation.x += 0.01行を移動する必要があります。恐ろしい

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;