CODEWITHSUNDEEP
javascriptthree.js
Agent Zebra
Agent Zebra

Reputation: 4540

three;js: Error accessing object

Basically I'm trying to get a 3d cube to face the direction the mouse is in. It's almost there, but right now it's not rendering the cube, which it was doing fine before I added this code:

cube.look(xTarget, yTarget);

which is giving this error: 

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

It's making the cube object inaccessible, why is that? (...at least, that's what I think the problem is). What am I doing wrong here?

Here's a plunker

Here's the relevant js:

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);
}

Upvotes: 1

Views: 119

Answers (1)

Kenneth Ito
Kenneth Ito

Reputation: 5261

Working plunker here. http://plnkr.co/edit/3gZVI8UXRdTW7fLddj9N?p=preview

There were several problems

I changed

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

to 

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

in order to fix your null reference problems. (Animate and loop require the cube to be created before they can work with it).

Also your inheritance (I assume you were going for inheritance?) was incorrect.

I updated it to

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;

Also updated Cube.prototype.updateBody to appropriately call the inherited Mesh's rotation (this.rotation.x as opposed to this.box.rotation.x)

Upvotes: 2

Related Questions