javascript - 通过相机旋转计算平面上的 x z 运动

标签 javascript three.js augmented-reality hammer.js

我使用 HammerJS 在 AR 空间中移动一个 3D 对象。

只要我不移动手机(即相机),它就可以正常工作...

const newTranslation = new THREE.Vector3(this._initTranslation.x + e.deltaX, this._initTranslation.y, this._initTranslation.z + e.deltaY);

init...是Object3D的原始初始化

当我四处移动时,运动仍然在我开始时的 x z 轴上。 (我在手机上向上移动手指(向后移动对象(在 z 轴上)),而不是从左向右移动)

我知道我必须将相机旋转纳入计数,以从相机转换到世界,但不知道如何做到这一点。

预先感谢您的帮助。

最佳答案

我自己修好了。这是我的解决方案,以防有人需要:

我现在用相机旋转 Angular 旋转该点:

const movePoint = new THREE.Vector2(e.deltaX, e.deltaY);
movePoint.rotateAround(new THREE.Vector2(0, 0), this.getCameraAngle());

const newTranslation = new THREE.Vector3(this._initTranslation.x + movePoint.x, 
this._initTranslation.y, this._initTranslation.z + movePoint.y);

相机 Angular :

public getCameraAngle (): number {
  const cameraDir = new THREE.Vector3();
  this._arCamera.getWorldDirection(cameraDir);
  cameraDir.setY(0);
  cameraDir.normalize();

  return Math.atan2(cameraDir.z, cameraDir.x) - Math.atan2(-1, 0);
}

关于javascript - 通过相机旋转计算平面上的 x z 运动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55398786/

相关文章:

javascript - 如何在 jQuery 中像地理图表一样创建图例?

JavaScript 如何将两个数组映射到一个对象

javascript - 在 javascript 中检查具有 null 值的 switch case

Three.js 子网格位置总是返回 (0,0,0)

javascript - Phonegap 是否支持 WebRTC?

swift - ARKit People Occlusion 样本是如何完成的?

javascript - setInterval 不起作用

three.js - 如何在绘制线条中设置不透明度使用three.js,使用LineBasicMaterial?

Three.js - 我可以 'apply' 定位、旋转和缩放几何体吗?

3d - 如何查看从Apple ARKit 2.0扫描3D对象应用程序导出的arobject扩展格式?