three.jsでインポートしたオブジェクトを移動して回転させる方法

Question

私はウェブ上でインタラクティブな3Dシーンを作成する必要がある小さなプロジェクトをやっています。私はthree.jsを使ってミキサーデザインのオブジェクトをインポートしました。最初にJSONとしてオブジェクトをエクスポートしようとしましたが、Webにインポートされません。次に、オブジェクトを別々の.objファイルとしてエクスポートして、1つずつインポートしようとしました。

ここでは、ユーザーがY軸だけに沿って各オブジェクトを移動して回転するようにする必要があります。私のデザインはハウスプランのものなので、各部屋を回転させて移動するだけでいいです。 私にこれのための情報源を見つけることができれば、大きな助けになるでしょう。

これは私がシーンとインポートされたオブジェクト1つずつ作成された後のコードです：

var obj1 = { 
    scene: null, 
    camera: null, 
    renderer: null, 
    container: null, 
    controls: null, 
    clock: null, 
    stats: null, 

    init: function() { // Initialization 

    // create main scene 
    this.scene = new THREE.Scene(); 
    this.scene.fog = new THREE.FogExp2(0xcce0ff, 0.0003); 

    var SCREEN_WIDTH = window.innerWidth, 
     SCREEN_HEIGHT = window.innerHeight; 

    // prepare camera 
    var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH/SCREEN_HEIGHT, NEAR = 1, FAR = 2000; 
    this.camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); 
    this.scene.add(this.camera); 
    this.camera.position.set(0, 100, 300); 
    this.camera.lookAt(new THREE.Vector3(0,0,0)); 

    // prepare renderer 
    this.renderer = new THREE.WebGLRenderer({ antialias:true }); 
    this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); 
    this.renderer.setClearColor(this.scene.fog.color); 
    this.renderer.shadowMapEnabled = true; 
    this.renderer.shadowMapSoft = true; 

    // prepare container 
    this.container = document.createElement('div'); 
    document.body.appendChild(this.container); 
    this.container.appendChild(this.renderer.domElement); 

    // events 
    THREEx.WindowResize(this.renderer, this.camera); 


    // prepare controls (OrbitControls) 
    this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement); 
    this.controls.target = new THREE.Vector3(0, 0, 0); 
    this.controls.maxDistance = 2000; 

    // prepare clock 
    this.clock = new THREE.Clock(); 

    // prepare stats 
    this.stats = new Stats(); 
    this.stats.domElement.style.position = 'absolute'; 
    this.stats.domElement.style.left = '50px'; 
    this.stats.domElement.style.bottom = '50px'; 
    this.stats.domElement.style.zIndex = 1; 
    this.container.appendChild(this.stats.domElement); 

    // add spot light 
    var spLight = new THREE.SpotLight(0xffffff, 1.75, 2000, Math.PI/3); 
    spLight.castShadow = true; 
    spLight.position.set(-100, 300, -50); 
    this.scene.add(spLight); 

    // add simple ground 
    var ground = new THREE.Mesh(new THREE.PlaneGeometry(200, 200, 10, 10), new THREE.MeshLambertMaterial({color:0x999999})); 
    ground.receiveShadow = true; 
    ground.position.set(0, 0, 0); 
    ground.rotation.x = -Math.PI/2; 
    this.scene.add(ground); 

    // load a model 
    this.loadModel(); 
    }, 



    loadModel: function() { 

    // prepare loader and load the model 
    var oLoader = new THREE.OBJMTLLoader(); 
    oLoader.load('models/Kitchen.obj', 'models/Kitchen.mtl', function(object) { 

    // object.position.x = -200; 
    // object.position.y = 0; 
    // object.position.z = 100; 
     object.scale.set(10, 10, 10); 
     obj1.scene.add(object); 
    }); 



    // prepare loader and load the model 
    var oLoader = new THREE.OBJMTLLoader(); 
    oLoader.load('models/Bath.obj', 'models/Bath.mtl', function(object) { 

    // object.position.x = -200; 
    // object.position.y = 0; 
    // object.position.z = 100; 
     object.scale.set(10, 10, 10); 
     obj1.scene.add(object); 
    }); 


    // prepare loader and load the model 
    var oLoader = new THREE.OBJMTLLoader(); 
    oLoader.load('models/Bedroom.obj', 'models/Bedroom.mtl', function(object) { 

    // object.position.x = -200; 
    // object.position.y = 0; 
    // object.position.z = 100; 
     object.scale.set(10, 10, 10); 
     obj1.scene.add(object); 
    }); 


    // prepare loader and load the model 
    var oLoader = new THREE.OBJMTLLoader(); 
    oLoader.load('models/Closet.obj', 'models/Closet.mtl', function(object) { 

    // object.position.x = -200; 
    // object.position.y = 0; 
    // object.position.z = 100; 
     object.scale.set(10, 10, 10); 
     obj1.scene.add(object); 
    }); 


    // prepare loader and load the model 
    var oLoader = new THREE.OBJMTLLoader(); 
    oLoader.load('models/Corridor.obj', 'models/Corridor.mtl', function(object) { 

    // object.position.x = -200; 
    // object.position.y = 0; 
    // object.position.z = 100; 
     object.scale.set(10, 10, 10); 
     obj1.scene.add(object); 
    }); 

    // prepare loader and load the model 
    var oLoader = new THREE.OBJMTLLoader(); 
    oLoader.load('models/Potio.obj', 'models/Potio.mtl', function(object) { 

    // object.position.x = -200; 
    // object.position.y = 0; 
    // object.position.z = 100; 
     object.scale.set(10, 10, 10); 
     obj1.scene.add(object); 
    }); 

    // prepare loader and load the model 
    var oLoader = new THREE.OBJMTLLoader(); 
    oLoader.load('models/Living.obj', 'models/Living.mtl', function(object) { 

    // object.position.x = -200; 
    // object.position.y = 0; 
    // object.position.z = 100; 
     object.scale.set(10, 10, 10); 
     obj1.scene.add(object); 
    }); 

    } 
}; 

// Animate the scene 
function animate() { 
    requestAnimationFrame(animate); 
    render(); 
    update(); 
} 

// Update controls and stats 
function update() { 
    obj1.controls.update(obj1.clock.getDelta()); 
    obj1.stats.update(); 
} 

// Render the scene 
function render() { 
    if (obj1.renderer) { 
    obj1.renderer.render(obj1.scene, obj1.camera); 
    } 
} 

// Initialize lesson on page load 
function initializeObj() { 
    obj1.init(); 
    animate(); 
} 

if (window.addEventListener) 
    window.addEventListener('load', initializeObj, false); 
else if (window.attachEvent)enter code here 
    window.attachEvent('onload', initializeObj); 
else window.onload = initializeObj; 

Answer 1

を、あなたがそれを回転させるために後で使用変数にロードされたオブジェクトを保存することができます

可変-add：var myObj;

-whenオブジェクトをロードし、変数

oLoader.load('models/Living.obj', 'models/Living.mtl', function(object) { 
     myObj = object; 
     object.scale.set(10, 10, 10); 
     obj1.scene.add(object); 
    }); 

を設定しますアニメーション（）関数-inside

、時間をかけて、あなたのオブジェクトを回転させる：

myObj.rotation.y = Date.now()*.002; 

または代わり

---

いくつかの他のものを行う、あなたのシーン構造に一貫性があるとして、あなただけの

を使用することができます

obj1.scene.children[4].rotation.y = Date.now()*.002;

ただし、読み込み順序を変更したり、ライトなどを追加するたびに番号を調整する必要があることに注意してください。あなたにそれをお勧めしません

マウスでそれを回転させるには：

//you need to store this to know how far the mouse has moved 
var lastMPos = {}; 

//this function is called when the mouse is moved 
function mousemove(event){ 

    //you can only calculate the distance if therer already was a mouse event 
    if (typeof(lastMPos.x) != 'undefined') { 

     //calculate how far the mouse has moved 
     var deltaX = lastMPos.x - event.clientX, 
      deltaY = lastMPos.y - event.clientY; 

     //rotate your object accordingly 
     obj1.scene.children[4].rotation.y += deltaX *.005; 
    } 

    //save current mouse Position for next time 
    lastMPos = { 
     x : event.clientX, 
     y : event.clientY 
    }; 
}