three; js: Ошибка доступа к объекту

Question

В основном я пытаюсь получить 3D-куб в направлении, в котором находится мышь. Это почти что есть, но сейчас это не рендеринг куба, который он делал хорошо, прежде чем добавить этот код:

cube.look(xTarget, yTarget); 

, который дает эту ошибку:

Uncaught TypeError: Cannot read property 'look' of undefined` 

это делая cube объект недоступен, почему это? (... по крайней мере, вот что я считаю проблемой). Что я здесь делаю неправильно?

Here's a plunker

Вот соответствующие ЯШ:

Cube.prototype.updateBody = function(speed){ 
    this.box.rotation.y += (this.tBoxRotY - this.box.rotation.y)/speed; 
    this.box.rotation.x += (this.tBoxRotX - this.box.rotation.x)/speed; 
    this.box.position.x += (this.tBoxPosX-this.box.position.x)/speed; 
    this.box.position.y += (this.tBoxPosY-this.box.position.y)/speed; 
    this.box.position.z += (this.tBoxPosZ-this.box.position.z)/speed; 
} 

Cube.prototype.look = function(xTarget, yTarget){ 
    this.tBoxRotY = rule3(xTarget, -200, 200, -Math.PI/4, Math.PI/4); 
    this.tBoxRotX = rule3(yTarget, -200,200, -Math.PI/4, Math.PI/4); 
    this.tBoxPosX = rule3(xTarget, -200, 200, 70,-70); 
    this.tBoxPosY = rule3(yTarget, -140, 260, 20, 100); 
    this.tBoxPosZ = 0; 
} 

function loop() { 
     render(); 
    var xTarget = (mousePos.x-windowHalfX); 
    var yTarget= (mousePos.y-windowHalfY); 
    console.log('Mouse X position: ' + xTarget +', Y Target = '+yTarget); 
    cube.look(xTarget, yTarget); 
    requestAnimationFrame(loop); 
} 

Answer 1

Работа plunker здесь. http://plnkr.co/edit/3gZVI8UXRdTW7fLddj9N?p=preview

Существовали несколько проблем

Я изменил

init(); 
animate(); 
loop(); 
createCube(); 

в

init(); 
createCube(); 
animate(); 
loop(); 

для того, чтобы исправить свои нулевые эталонные проблемы. (Анимация и цикл требуют создания куба, прежде чем они смогут с ним работать).

И ваше наследство (я предполагаю, что вы собираетесь наследовать?) Было неверным.

Я обновил его

Cube = function(){ 
    var geometry = new THREE.BoxGeometry(50, 50, 50); 

     for (var i = 0; i < geometry.faces.length; i += 2) { 

      var hex = Math.random() * 0xffffff; 
      geometry.faces[ i ].color.setHex(hex); 
      geometry.faces[ i + 1 ].color.setHex(hex); 
     } 

    var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, overdraw: 0.5 }); 

    //I removed this line 
    //Can't do inheritance like this as far as I know? 
    //return box = new THREE.Mesh(geometry, material); 

    //And added this line instead. 
    //Apply your arguments to the Mesh's constructor 
    THREE.Mesh.apply(this, [geometry, material]); 
} 

//I added these lines as well... 
//Set up the prototypes and constructors for inheritance 
Cube.prototype = THREE.Mesh.prototype; 
Cube.prototype.constructor = Cube; 

Также обновлено Cube.prototype.updateBody соответствующим образом вызвать унаследованное вращение меша (this.rotation.x, в отличие от this.box.rotation.x)