Как сделать так, чтобы куб всегда появлялся перед камерой XR (телефона)?

Я пытаюсь сделать кубическую сетку всегда расположенной перед камерой XR.

Как бы я ни перемещал камеру телефона, куб должен появиться прямо перед камерой, показывая только одну сторону куба.

Во-первых, я добавил кубическую сетку в сцену в самом начале:

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);
}

Когда я запускаю код, куб появляется перед камерой моего телефона.

Но когда я поворачиваю свой телефон, куб вращается в том же положении, не следуя за камерой.

Я также пробовал xrCamera.add(box), но, похоже, это не работает.

Как я могу правильно заставить куб всегда оставаться неподвижным перед камерой XR?


three.js webxr
person Zack Lee    schedule 27.04.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Важно знать, что в настоящее время (r115) свойства преобразования position, rotation и scale, а также локальная матрица камеры XR не обновляются.

Поэтому вместо того, чтобы добавлять поле в xrCamera, добавьте его в camera. Кроме того, имейте в виду, что WebXRManager.getCamera() предназначен только для внутреннего использования и не является частью общедоступного API.

person Mugen87    schedule 27.04.2020
comment
Спасибо за ваш ответ. Но если я console.log позиционирую и поворачиваю камеру, она просто выводит {x: 0, y: 0, z: 0}. тогда как xrCamera, кажется, выводит текущее положение и вращение камеры телефона в мире AR. - person Zack Lee; 27.04.2020
comment
Неважно, Если я добавлю коробку в камеру, то она работает как положено! Но я до сих пор не понимаю, как это может работать. - person Zack Lee; 27.04.2020
comment
В настоящее время в библиотеке есть проблема, которая не позволяет правильно установить положение, поворот и масштаб, см. github.com/mrdoob/three.js/issues/18448. IMO, добавление box в качестве дочернего элемента к camera на данный момент является лучшим подходом. - person Mugen87; 27.04.2020
comment
Я надеюсь, что мы скоро исправим эту проблему, чтобы вместо этого можно было работать с положением, вращением и масштабированием. Однако всегда работайте с камерой, которую вы создаете в своей сцене. Пожалуйста, не используйте WebXRManager.getCamera()^^. - person Mugen87; 27.04.2020
comment
Если WebXRManager.getCamera() предназначен только для внутреннего использования, есть ли какое-либо альтернативное решение, позволяющее узнать текущее положение/поворот камеры XR, чтобы я мог что-то сделать с данными? (например, если камера приближается к объекту, сделайте что-нибудь) - person Zack Lee; 27.04.2020
comment
Вы можете извлечь положение в мире, кватернион и масштаб с помощью Matrix4. разложить(). Таким образом, 1_. В этом фрагменте кода camera — это ваша обычная камера сцены. - person Mugen87; 27.04.2020