Question

我正在旋转摄像头，以便当用户单击“立方体”的一面时，摄像头会重新放置在该面的前面。

将摄像机重新放置在底面（朝下）后，将不会渲染任何场景对象！发生了什么？我正在做的所有其他补间都不会遇到这个问题。

这是由于找到相机并使其看起来“向上”引起的吗？调用lookAt之后，相机旋转将自动重置为{0,0,0}。。

编辑：我可以肯定的是，问题是由于使用lookAt调整了相机的方向，导致相机翻转（Three.js camera rotation issue）。如何通过使用四元数来调整相机的方向来避免这种情况？

...

this.camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
this.camera.up = new THREE.Vector3(0.0, 0.0, 1.0);
this.camera.position.set( 30, -30, 30 );
this.camera.aspect = kCanvasWidth/kCanvasHeight; 
this.camera.lookAt( new THREE.Vector3() );
...
let offset = this.camera.position.distanceTo(new THREE.Vector3());
this.tweenCameraToPosition(0,0,-offset);

...
tweenCameraToPosition(x, y, z, rx, ry, rz) { 

    var self = this;
    this.animating = true;
    this.animate();
    TWEEN.removeAll();
    var start = {
      x: this.camera.position.x,
      y: this.camera.position.y,
      z: this.camera.position.z
    };
    var finish = {x: x, y: y, z: z};
    new TWEEN.Tween( start )
    .to( finish, 300 )
    .onUpdate(function () {
      self.camera.position.set(this.x, this.y, this.z);
      self.camera.lookAt(new THREE.Vector3());
      self.light.position.copy(self.camera.position);
    })
    .easing(TWEEN.Easing.Linear.None)
    .onComplete(function () {
      self.animating = false;
    })
    .start();
  }
...
    animate() {
    if (this.animating) {
      this.camera.updateProjectionMatrix();
      TWEEN.update();
      requestAnimationFrame(this.animate);
      this.render();
    }
  }

  render() { 
    this.renderer.render(this.scene, this.camera);
  }

THREE.js场景对象在重新定位相机到底部时消失

0 个答案: