math - Three.js/Aframe 修复围绕球体的旋转

Question

我开发了一个功能，它实际上是一个跟随相机的球体，因此您可以为球体设置动画，以便映射到球体内部的 360 度视频的所需部分位于相机前面。

我希望你为平移和倾斜设置动画，因此球体动画到那个位置，所以它有点跟随你。即你向左看，球体向左移动以跟随你。上下也一样。

this._prevVec = this.el.object3D.rotation.clone()

this._sourceVec = new THREE.Vector3(
    this._cameraParent.object3D.rotation.x + THREE.MathUtils.degToRad( this._rotationAnimation.x  ),
    this._cameraParent.object3D.rotation.y + THREE.MathUtils.degToRad( this._rotationAnimation.y  ),
    this._cameraParent.object3D.rotation.z + THREE.MathUtils.degToRad( this._rotationAnimation.z  )
)

this._deltaY = floatModulo( this._sourceVec.y - this._prevVec.y, -this._half, this._half )
this._deltaX = floatModulo( this._sourceVec.x - this._prevVec.x, -this._half, this._half )

this._rotationSpeedY = three.Math.mapLinear(
  this._deltaY, -this.data.springAngle, this.data.springAngle,
  -this.data.peakSpeed, this.data.peakSpeed
)

this._rotationSpeedX = three.Math.mapLinear(
  this._deltaX, -this.data.springAngle, this.data.springAngle,
  -this.data.peakSpeed, this.data.peakSpeed
)

  this.el.object3D.rotation.set(
      this._prevVec.x + this._rotationSpeedX * timeDelta,
      this._prevVec.y + this._rotationSpeedY * timeDelta,
      THREE.MathUtils.degToRad(this._rotation.z),
      "YXZ"
    )

这适用于平移（Y），但有时仅适用于倾斜，因为它们会根据前进的方向而变化。

我尝试使用四元数和 slerping - 但问题是一样的。

我在想的另一件事是 2 个实体，并独立旋转它们。

我只想为平移/倾斜值设置动画，我不确定如何表示？

编辑

我试图让它与 Quarternion 一起工作

this._prevQuat = this.el.object3D.quaternion.clone()

this._sourceVec = new THREE.Vector3(
    this._cameraParent.object3D.rotation.x + THREE.MathUtils.degToRad( this._rotation.x  ),
    this._cameraParent.object3D.rotation.y + THREE.MathUtils.degToRad( this._rotation.y  ),
    this._cameraParent.object3D.rotation.z + THREE.MathUtils.degToRad( this._rotation.z  )
)

this._sourceQuat = this._cameraParent.object3D.quaternion.clone()

this._deltaY = floatModulo( this._sourceQuat.y - this._prevQuat.y, -this._half, this._half )
this._deltaX = floatModulo( this._sourceQuat.x - this._prevQuat.x, -this._half, this._half )

this._rotationSpeedY = three.Math.mapLinear(
  this._deltaY, -this.data.springAngle, this.data.springAngle,
  -this.data.peakSpeed, this.data.peakSpeed
)
this._rotationSpeedX = three.Math.mapLinear(
  this._deltaX, -this.data.springAngle, this.data.springAngle,
  -this.data.peakSpeed, this.data.peakSpeed
)

//this.el.object3D.rotation.y = this._prevVec.y + this._rotationSpeedY * timeDelta

this.el.object3D.quaternion.slerp(new THREE.Quaternion(
  this._prevQuat.x + this._rotationSpeedX * timeDelta,
  this._prevQuat.y + this._rotationSpeedY * timeDelta,
  this._prevQuat.z,
  this._prevQuat.w
), 1)

这种作品 - 但似乎改变了球体的形状或位置！？但运动更接近。

标签： maththree.jsrotationaframe