如何让一个立方体一直出现在XR(phone)相机前？

Question

我正在尝试制作一个始终位于 XR 相机前面的立方体网格。

无论我如何移动 phone 相机，立方体都应该出现在相机的正前方，只显示立方体的一侧。

首先，我在一开始的场景中添加了一个立方体网格：

material = new THREE.MeshLambertMaterial({ color: 0x9797CE });
box = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), material);
box.position.set(0, 0, -3);
scene.add(box);

然后尝试在 XR 相机前绘制框：

function animate() {
    let xrCamera = renderer.xr.getCamera(camera);
    box.position.set(xrCamera.position.x, xrCamera.position.y, xrCamera.position.z - 3);
    box.rotation.set(xrCamera.rotation.x, xrCamera.rotation.y, xrCamera.rotation.z);
    renderer.render(scene, camera);
}

当我运行代码时，立方体出现在我的 phone 相机前。

但是当我旋转 phone 时，立方体会在同一位置自行旋转，而不是跟随相机。

我也试过xrCamera.add(box)，但好像不行。

如何才能正确地让立方体始终静止不动地出现在 XR 相机前？

Answer 1

重要的是要知道目前 (r115) 变换属性 position、rotation 和 scale 以及 XR 相机的局部矩阵不是已更新。

所以不要将框添加到 xrCamera，而是将其添加到 camera。此外，请记住 WebXRManager.getCamera() 仅供内部使用，不属于 public API.

Answer 2

我一直在解决类似的问题。我需要使用 aframe API 在镜头前找到一个点。但挑战是当体验处于 VR 模式（全屏）并在手机或耳机上播放时。在这种情况下，当前相机的管理完全由 WebXR 控制。使用 WebXR 三在内部将耳机姿势应用于 object3D。

您只能使用三个相机的matrixWorld 来访问相机世界参考数据，其他属性或方法不正确。在 aframe 的情况下，您必须访问 aframe 相机实体的 object3D 并管理其 matrixWorld。当播放处于 VR/AR 模式时，这是通过移动或 AR/VR 护目镜的传感器移动的摄像机的 position/rotation/scale 正确信息的唯一方法。

我使用 WebXR 耳机姿势获取相机前面的位置：

const distanceFromCamera = 250;  // the depth in the screen, what ever you need
const inFrontOfCameraPosition = new AFRAME.THREE.Vector3( 0, 0, -distanceFromCamera );

const threeSceneCamera = <THREE.PerspectiveCamera>AFRAME.scenes[0].camera;
inFrontOfCameraPosition.applyMatrix4( threeSceneCamera.matrixWorld );

return { x: inFrontOfCameraPosition.x, y: inFrontOfCameraPosition.y, z: inFrontOfCameraPosition.z };

如何让一个立方体一直出现在XR(phone)相机前？

How to make a cube to always appear in front of the XR(phone) camera?

three.js

webxr