通过设备方向和触摸控制Threejs相机

时间:2016-06-19 22:40:42

标签: javascript 3d three.js user-controls

我对3D编程及其背后的所有数学都很陌生,现在我使用设备方向或触摸事件来移动相机时工作正常,但我实现这个的方式会覆盖另一个。我可以让谁一起工作?我使用四元数来设置相机位置,因此我基本上尝试使触摸事件在设备方向事件之上工作。

设备方向的代码:

  onDeviceMotionChange(deviceMotion) {
    this.alpha = TMath.degToRad(deviceMotion.alpha);
    this.beta = TMath.degToRad(deviceMotion.beta);
    this.gamma = TMath.degToRad(deviceMotion.gamma);
  }

  update() {
    this.euler.set(this.beta, this.alpha, -this.gamma, 'YXZ');
    this.deviceOrientation.setFromEuler(this.euler);

    this.deviceOrientation.multiply(this.centralizer);
    this.camera.quaternion.copy(this.deviceOrientation);
  }

触摸/鼠标的代码:

  onMouseMove(event) {
    this.rotateEnd.set(event.clientX, event.clientY);
    this.rotateDelta.subVectors(this.rotateEnd, this.rotateStart);
    this.rotateStart.copy(this.rotateEnd);

    this.phi += (2 * Math.PI * this.rotateDelta.y / this.renderer.height * 0.5);
    this.theta += (2 * Math.PI * this.rotateDelta.x / this.renderer.width * 0.6);
   }

  update() {
    this.euler.set(this.phi, this.theta, 0, 'YXZ');
    this.dragOrientation.setFromEuler(this.euler);
    this.camera.quaternion.copy(this.dragOrientation);
  }

0 个答案:

没有答案