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

Question

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

Answer 1

回答主题

您可以使用 javascript 设置查看组件，方法是将其添加到任何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轴。如果可能，请在搅拌机等 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 ....>

在这个小故障中 查看
如果有更多模型，您可以创建一个旋转偏移数组，并在[gltf-model]每次加载新模型时将其应用于节点。

---

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

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

Answer 2

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

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