如何以编程方式使用 Ar.js 中的查看功能

Question

我正在尝试通过 js 动态使用 Ar.js 的查看功能。但出于某种原因，3d 对象并没有向屏幕外看。

Answer 1

您必须在实体的 object3D 上调用 lookAt 方法。像这样：

var camera = document.querySelector("[camera]");
var position = camera.object3D.position;
entityEl.object3D.lookAt(new THREE.Vector3(position.x, position.y, position.z));

Answer 2

答题

您可以使用 javascript 设置 look-at 组件，方法是将其添加到任何 a-frame 实体：

// using an existing entity as a target
entity.setAttribute("look-at", "#selector");
// using a Vector3 position as target 
entity.setAttribute("look-at", {x: 0, y: 0, z: 0})

回答这个具体案例

look-at 组件（及其使用的 lookAt 方法）假定模型朝向 z 轴。

鸭子模型朝向 x 轴。如果可能，请在 Blender 等 3D 建模软件中重新定向模型。如果没有，那么你可以使用父节点来重新定位它：

<!-- Parent node will look at the user--/>
<a-entity look-at="[camera]">
    <!-- Child node with the rotation offset--/>
    <a-entity rotation="0 -90 0" gltf-model ....>

看看in this glitch
如果模型较多，可以创建一个旋转偏移数组，每次加载新模型时将其应用到[gltf-model]节点。

<a-camera> 已经包含一个 camera。要更改其属性，只需使用 <a-camera> attributes:

<a-camera fov="60" ....></a-camera>

如何以编程方式使用 Ar.js 中的查看功能

How to use look-at feature in Ar.js programatically

javascript

three.js

aframe

ar.js

答题

回答这个具体案例