我正在为我正在做的一个 VR 项目使用框架，并且我正在使用地面上的检查点来引导用户在 3D 空间中进行操作。我之前收到过关于如何创建检查点的帮助here
这是我项目最新迭代的链接 -> https://museum-exhibit-demo.glitch.me/webVR.html
是否可以让将您带到圆柱体的动画也改变相机的视图和高度？基本上，一旦我单击圆柱体将我带到该位置，它也会将我的视图捕捉到墙上的文字，即使它不是眼睛高度
【问题讨论】：
很棒的演示。我已经在glitch (app) 上准备了一个候选解决方案。这个解决方案改变了相机的高度，以及相机的水平方向/偏航。它不会改变相机的俯仰角。理想情况下，任何 AR/VR 应用程序都会尽量减少强制改变相机方向。如果你强行改变摄像头的俯仰角，就像永久倾斜用户的地板一样。如果你只是改变偏航，那只会永久改变它们的水平方向。改变俯仰角是可以做到的，但我认为从用户的角度来看，这可能会导致比其价值更多的问题，改变偏航角就可以了。之前在https://stackoverflow.com/a/47667912/10849562 中提到过类似的建议。
我将通过解决您的两个问题来分解解决方案代码，让带您到圆柱体的动画也改变相机的高度，以及它如何单独改变视图/方向？我将添加对解决方案的相关引用。
更改高度以匹配文本的高度
首先，您需要知道与检查点圆柱体相关联的文本的高度。一种方法是将相关a-text 实体的id 提供给goto 组件。为此，我向您的 goto 组件 (L79) 添加了一个新组件属性 textId。然后在您使用goto 组件的每个地方设置textId 属性。例如，对于与 Welcome! 文本关联的检查点柱面，goto 组件已更改为 goto="textId: welcome" (L298)。
关联的a-text 实体的id 可以使用this.data.textId 从goto 组件的方法中访问，每个goto 组件都不同。使用组件中的此信息，可以通过与找到 rig 位置类似的方式找到 a-text 实体的位置，方法是使用 document.querySelector L83 找到 a-text 元素，然后找到位置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 是 THREE.js（A-Frame 所基于）的一种方法，并将位置存储在 textPos 变量中。您可以像使用rigPos 一样使用textPos。代替rigPos.y，您现在可以使用textPos.y 来获取文本的高度作为位置动画的终点来更改相机的高度。
请注意，1.6 是从解决方案中的高度取走的。 A-Frame 中相机的默认高度为 1.6。您已通过在 #pov 实体中将相机的位置减少 -1.1 来解决此问题。
改变相机的方向匹配文字的方向
首先，我们需要知道文本相对于其关联的检查点圆柱体的方向。因为我们现在可以访问圆柱体的位置，所以可以计算从圆柱体到文本之间的方向向量 (L111)。由此可以计算从检查点圆柱体到文本的方向的方位角或偏航角（L115）。为此，创建了一个函数getYaw (L46) 来计算偏航角。
因为您已经对包裹a-camera 实体的#pov 实体应用了90 度的偏航旋转，所以偏航角是从负z 轴(0, 0, -1) 计算的。
现在您已经知道了文本从检查点圆柱体的方向，您需要知道相机当前指向的偏航方向。您可以从a-camera 实体的rotation 组件中找到它。就像查找任何实体的位置一样，您可以使用document.querySelector (L84) 找到a-camera 元素，并找到它的偏航角camera.getAttribute("rotation").y (L116)。然后，您可以通过计算从 camera 实体到在解决方案 (L117) 中称为 targetRigYaw 的 text 实体的相对角度来计算应将 rig 设置为的目标偏航角。
请注意，mod 函数有很多应用。这只是确保所有偏航角始终为正且在 [0, 360] 之间，这有助于在应用角度时简化事情。
您现在可以使用 targetRigYaw 作为角度来设置您的装备来更改视图方向以查看文本。但是，根据文本方向和相机方向的偏航角，该角度可能大于 180 度。您可以想象您可以向左或向右旋转以最终朝特定方向看。除非您要查看的方向直接在您身后，否则其中一个方向将比另一个方向短。 L120-123 更改 targetRigYaw 角度，以便您始终以最短角度方向旋转以最终查看文本。
为了以与动画位置相同的方式动画偏航，您可以将第二个组件添加到 #pov 实体。在解决方案中，这称为animation__rotation (L144)。 A-Frame 文档描述了如何使用 __ 表示法 https://aframe.io/docs/1.0.0/components/animation.html#multiple-animations 添加多个动画。
然后我们可以设置animation__rotation 组件以类似于position 的方式执行#pov 实体的rotation 的动画。 animation__rotation 组件使用setAttribute 设置从rig 的当前偏航角度旋转到targetRigYaw 角度，并且动画的持续时间设置为与位置动画相同的长度。
我希望这有助于解决您的两个问题。请让我知道，如果你有任何问题。我在代码中添加了注释，但是我添加了很多 sn-ps，它们的作用可能并不明显。
【讨论】：