Three.js: 无法补间对象位置 var（获取空错误），但对象本身实际上可用

Question

正在尝试使用函数 flyUp() 定位我的 pig 对象 position var。但是函数 flyUp() 中的 pig.position 出现 null 错误。但是，对象 pig 实际上在 flyUp() 函数中可用。我还在 Pig 和 createPig 上收到错误 THREE.Object3D.add: object not an instance of THREE.Object3D。我在这里做错了什么？

Here's a plunker

这是相关的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} );
}

这里是完整的错误：

**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

Answer 1

这是我能够调试的内容：

第一个错误是因为你没有像初始化其他对象如this.torso或this.wingL等那样初始化this.tailSpiral对象。这个错误发生在您的 plnkr 的 script.js 文件的 452 行。暂时注释掉这一行，解决了这个问题。所以基本上，您需要为 tailSpiral 创建一个 ThreeJS 对象，就像您正在做的其他对象一样。
对于第二个错误，据我所知，pig 对象本身没有 position 属性。相反，position 对象在 body 对象中可用，而在 pig 对象中可用。此错误发生在行：514，也将发生在：522。因此，这些行需要看起来像：TweenLite.to(pig.body.position, 2.0, { y: ... });.
最后，对于行中的错误也是如此：505。属性 matrixWorld 不能直接用于 position 对象。相反，一个 body 对象位于它们之间。所以这一行需要看起来像：position.setFromMatrixPosition(pig.body.matrixWorld);.

希望这对您有所帮助。

Three.js: 无法补间对象位置 var（获取空错误），但对象本身实际上可用

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

javascript

inheritance

canvas

three.js

gsap