Question

我正在使用A-Frame v3.6.0，我想在点击3d对象后设置查看器的位置和方向。我正在使用此代码来定义相机和光标元素：

<a-entity camera="userHeight: 1.6" universal-controls position="0 -1 4">
    <a-entity cursor position="0 0 -1" geometry="primitive: ring; radiusInner: 0.020; radiusOuter: 0.028" material="color: #95E0E8; shader: flat"></a-entity>
</a-entity>

我见过使用setAttribute调用来更新位置的示例，但我不知道如何获取相机对象，或者如何设置方向向量。

Answer 1

您可以像获取HTML元素一样获得A-Frame元素。给它一个ID，然后按ID选择：
HTML：<a-entity id="camera" camera="universal-controls">
JS：document.querySelector('#camera').setAttribute('position', {...})

要更改方向，只需使用rotation属性即可。你可以自己动手来获取某个向量的角度，但look-at处理我的大多数用例。三，还有很多有用的数学函数。

但是，相机的位置和旋转通常是从耳机/设备自动设置的，因此您应该避免依赖于直接修改相机实体，而是修改相机的包装。

HTML：

<a-entity id="camera-wrapper">
    <a-entity id="camera" universal-controls>
        <a-entity cursor position="0 0 -1" geometry="primitive: ring; radiusInner: 0.020; radiusOuter: 0.028" material="color: #95E0E8; shader: flat"></a-entity>
    </a-entity>
<a-entity>

JS：document.querySelector('#camera-wrapper').setAttribute('position', {...})

以编程方式设置查看器的位置和方向

1 个答案: