Измените высоту, чтобы она соответствовала высоте текста
Сначала вы должны знать высота текста, связанного с цилиндром контрольной точки. Один из способов сделать это - предоставить id связанной сущности a-text компоненту goto. Для этого я добавил новое свойство компонента textId в ваш компонент goto (L79). Затем в каждом из мест, где вы использовали компонент goto, было установлено свойство textId. Например, для цилиндра контрольной точки, связанного с текстом Welcome!, компонент goto был изменен на goto="textId: welcome" (L298).
id соответствующего Доступ к элементу a-text можно получить из методов компонента goto, используя this.data.textId, который будет отличаться для каждого компонента goto. Используя эту информацию внутри компонента, можно найти положение объекта a-text аналогично тому, как вы нашли положение rig, найдя элемент a-text с document.querySelector L83 и затем нахождение позиции L93.
let text = document.querySelector(`#${this.data.textId}`);
text.object3D.getWorldPosition(textPos);
Обратите внимание, что вместо использования text.getAttribute("position") вместо этого используется метод getWorldPosition. Это потому, что вы завернули свои элементы a-text в элементы a-entity, которые также имеют установленные позиции. getAttribute("position") дает вам только позицию относительно родительской сущности, но для этого решения требуется абсолютная / мировая позиция текста. Конечно, другие решения могут сделать что-то другое, и также возможно изменить структуру HTML вашей демонстрации, чтобы вы могли использовать getAttribute("position"). getWorldPosition - это метод из ТРИ. js (на котором основан A-кадр), который сохраняет положение в переменной textPos. Вы можете использовать textPos так же, как rigPos. Вместо rigPos.y теперь вы можете сделать textPos.y, чтобы получить высоту текста в качестве конечной точки анимации положения, чтобы изменить высоту камеры.
Обратите внимание, что 1.6 убрано из высоты в решении. Высота камеры по умолчанию в A-Frame - 1.6. Вы справились с этим, уменьшив положение камеры на -1,1 в сущности #pov.
Измените направление камеры в соответствии с направлением текста
Сначала нам нужно узнать направление текста относительно соответствующего цилиндра контрольной точки. Поскольку теперь у нас есть доступ к положению цилиндра, можно рассчитать вектор направления между цилиндром и текстом (L111). Из этого можно рассчитать азимутальный угол или угол рыскания направления от цилиндра контрольной точки к тексту (L115). Чтобы сделать это вычисление, была создана функция getYaw (L46) для вычисления угла поворота.
Поскольку вы уже применили поворот на 90 градусов к вашей сущности #pov, которая окружает вашу a-camera сущность, угол рыскания рассчитывается по отрицательной оси z (0, 0, -1).
Теперь, когда у вас есть направление текста от цилиндра контрольной точки, вам нужно знать направление рыскания, на которое в данный момент указывает камера. Это можно узнать по компоненту rotation объекта a-camera. Как и при поиске позиции любой сущности, вы можете найти элемент a-camera с document.querySelector (L84) и найти угол его рыскания camera.getAttribute("rotation").y (L116). Затем вы можете рассчитать целевой угол рыскания, для которого вы должны установить rig, рассчитав относительный угол от объекта camera к объекту text, который в решении называется targetRigYaw (L117).
Обратите внимание, что существует множество приложений функции mod. Это просто гарантирует, что все углы рыскания всегда положительны и находятся между [0, 360], что помогает упростить вещи при применении углов.
Теперь вы можете использовать targetRigYaw в качестве угла, чтобы установить вашу буровую установку для изменения посмотреть направление, чтобы посмотреть на текст. Однако в зависимости от углов поворота направления текста и направления камеры этот угол может быть больше 180 градусов. Вы можете представить, что можете вращаться влево или вправо, чтобы в конечном итоге смотреть в определенном направлении. Если направление, в котором вы хотели бы смотреть, не находится непосредственно позади вас, одно из направлений будет закороченным вращением, чем другое. L120-123 измените угол targetRigYaw так, чтобы вы всегда вращались в кратчайшем направлении angular, чтобы в конечном итоге посмотреть на текст.
Чтобы анимировать рывок так же, как вы анимировали положение, в которое вы можете добавить второй компонент к сущности #pov. В решении это называется animation__rotation (L144). Документы A-Frame описывают, как вы можете добавить несколько анимаций, используя __ нотацию https://aframe.io/docs/1.0.0/components/animation.html#multiple -анимаций .
Затем мы можем установить компонент animation__rotation для выполнения анимации: rotation сущности #pov аналогично position. Компонент animation__rotation устанавливается с помощью setAttribute для поворота от текущего угла рыскания rig к углу targetRigYaw, а продолжительность анимации устанавливается на ту же длину, что и анимация положения.