THREE.jsオブジェクトは回転しません

Question

THREE.jsを使用してWebページに表示できるBlenderオブジェクトがありますが、ループ関数が呼び出されたときにオブジェクトは回転しません。

私はjsで作業中にOOPのアプローチを維持しようとしています。

ここに私のコードスニペットがあります。

var scene, camera, renderer, box; 

function createScene() { 
    scene = new THREE.Scene(); 

    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    renderer.setClearColor(0x3399ff); 

    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
    camera.position.z = 10; 

    container = document.getElementById('world'); 
    container.appendChild(renderer.domElement); 
} 

function createLight() { 
    light = new THREE.PointLight(0xffffff, 1.2); 
    light.position.set(0,0,6); 

    scene.add(light); 
} 

function createBox() { 
    box = new Box(); 
} 

Box = function() { 
    this.mesh = new THREE.Object3D(); 

    var loader = new THREE.JSONLoader(); 
    loader.load('json/model.json', function(geometry, materials) { 
     this.mesh = new THREE.Mesh(geometry, new THREE.MultiMaterial(materials)); 
     this.mesh.scale.x = this.mesh.scale.y = this.mesh.scale.z = 0.75; 
     this.mesh.translation = geometry.center(); 
     scene.add(mesh); 
    }); 
} 

Box.prototype.rotateBox = function() { 
    if (!this.mesh) { 
     return; 
    } 

    this.mesh.rotation.x += .001; 
    this.mesh.rotation.y += .01; 
} 

function loop() { 
    requestAnimationFrame(loop); 
    box.rotateBox(); 
    renderer.render(scene, camera); 
} 

function init() { 
    createScene(); 
    createLight(); 
    createBox(); 
    loop(); 
} 

window.addEventListener('load', init, false); 

Answer 1

私はそれが範囲の問題だと思います。提供されたコードはエラーを投げます。 「光」オブジェクトのスコープが未処理にも左で固定する必要が

Box = function() { 
    this.mesh = false; 
    var loader = new THREE.JSONLoader(); 
    var scope = this; 
    loader.load('json/model.json', function(geometry, materials) { 
     scope.mesh = new THREE.Mesh(geometry, new THREE.MultiMaterial(materials)); 
     scope.mesh.scale.x = scope.mesh.scale.y = scope.mesh.scale.z = 0.75; 
     scope.mesh.translation = geometry.center(); 
     scene.add(scope.mesh); 
    }); 
} 

Box.prototype.rotateBox = function() { 
    if (!this.mesh) { 
     return; 
    } 

    this.mesh.rotation.x += .001; 
    this.mesh.rotation.y += .01; 
} 

：あなたはこのような何かを試してみてください。