three;js: Error accessing object

Question

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

Is that the correct plunker link? The loop function doesn't have a cube.look. — Kenneth Ito
– Kenneth Ito, Commented Aug 13, 2015 at 23:36
Yes, it's on line 92 : Cube.prototype.look = function(xTarget, yTarget){....}; Oh wait, the line in the loop function is at Line 149. — Agent Zebra
– Agent Zebra, Commented Aug 13, 2015 at 23:39

Kenneth Ito · Accepted Answer · 2015-08-14 01:04:05Z

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)

Collectives™ on Stack Overflow

three;js: Error accessing object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related