CODEWITHSUNDEEP
javascriptinheritancecanvasthree.jsgsap
Agent Zebra
Agent Zebra

Reputation: 4550

Three.js: unable to tween objects position var (getting null error), but object itself is actually available

Trying to target my pig objects position var with the function flyUp(). But pig.position in the function flyUp() is getting a null error. However, the object pig is actually available in the flyUp() function. I'm also getting the error THREE.Object3D.add: object not an instance of THREE.Object3D on Pig and createPig. What am I doing wrong here?

Here's a plunker

Here's the relevant js: 

function createPig(){
  pig = new Pig();
 scene.add(pig.threegroup);
}

Pig.prototype.update = function() {
  this.wingAngle += this.wingSpeed/globalSpeedRate;
  this.wingL.rotation.z = -Math.PI / 4 + Math.cos(this.wingAngle) * this.wingAmplitude;
  this.wingR.rotation.z = Math.PI / 4 - Math.cos(this.wingAngle) * this.wingAmplitude;
}

function getFlyPosition(){
    scene.updateMatrixWorld(true);
    var position = new THREE.Vector3();
    position.setFromMatrixPosition(pig.matrixWorld );
    objectHeight = position.y;
    flyTime = Math.round(position.y/30);
    console.log('cube Y = ' + position.y + ', Flytime = ' + flyTime);
}


function flyUp(){
  console.log(this.pig);
    if (objectHeight < maxHeight) {
      TweenLite.to(pig.position, 2.0, {y: "+=45", ease:Expo.easeOut} );
      } else { 
        flyDown();
    }
}

function flyDown(){
    getFlyPosition();
    TweenLite.to(pig.position, flyTime, {y: 25, ease:Sine.easeInOut} );
}

Here's the errors in full:

**error 1**
THREE.Object3D.add: object not an instance of THREE.Object3D. undefinedT
HREE.error @ three.js:35
THREE.Object3D.add @ three.js:7770
Pig @ script.js:452
createPig @ script.js:160
(anonymous function) @ script.js:553

**error 2**
Uncaught Cannot tween a null target.(anonymous function) @        TweenMax.min.js:16
D.to @ TweenMax.min.js:17
flyUp @ script.js:515
handleMouseDown @ script.js:100

**error 3**
Uncaught TypeError: Cannot read property 'elements' of undefined
THREE.Vector3.setFromMatrixPosition @ three.js:2389
getFlyPosition @ script.js:505flyDown @ script.js:522
handleMouseUp @ script.js:104

Upvotes: 0

Views: 640

Answers (1)

Tahir Ahmed
Tahir Ahmed

Reputation: 5737

Here is what I have been able to debug:

  • The first error is because you have not initialised this.tailSpiral object like the way you have initialised other objects such as this.torso or this.wingL etc. This error happens at line: 452 of your plnkr's script.js file. Commenting out this line temporarily, fixes the issue. So basically, you need to create a ThreeJS object for tailSpiral like what you are doing the rest of them.

  • For second error, from what I can tell, pig object doesn't have a position property on itself. Rather, the position object is available within body object which is available within the pig object. This error happens at line: 514 and will also happen at: 522. So, these lines need to look something like: TweenLite.to(pig.body.position, 2.0, { y: ... });.

  • And finally, same thing for the error at line: 505. The property matrixWorld is not directly available to the position object. Rather, a body object sits between them. So this line needs to look like: position.setFromMatrixPosition(pig.body.matrixWorld);.

Hope this helps.

Upvotes: 1

Related Questions