如何使用带有一帧相机组件和外观控件的 lookAt() 来查看对象

Question

目标：我想创建一种基于 Web 的体验，用户需要在其中看到场景中的一系列元素，然后我想让用户自行探索。

我在场景周围有几个物体，我想让相机一个一个地看它们。我正在使用 lookat() 方法，但无法正常工作。我在 Threejs 上找到了这个例子：

http://jsfiddle.net/L0rdzbej/135/

但是我的示例与前面的示例不同。

在@Mugen87 的回答有效但稍作修改后：

document.getElementById('cam').sceneEl.camera.lookAt

通过这种方式访问相机。您可以在此处查看示例：

https://glitch.com/~aframe-lookat-cam-not-working

请点击“动画相机”按钮。

Answer 1

如本 thread 中所述，如果您手动覆盖相机旋转，则必须删除或禁用 [=12=]。所以你可以这样做：

var cameraEl = document.getElementById('camera');
cameraEl.setAttribute('look-controls', {enabled: false});

要禁用控件，请执行您的 lookAt() 操作，然后通过以下方式启用控件：

cameraEl.setAttribute('look-controls', {enabled: true})

Answer 2

@Mugen87 的答案是正确的，但在使用@Mugen87 的答案后，我添加了一个名为“look box”的新按钮，相机只能看到 1 个框。与按钮“动画相机”的逻辑相同，但在代码运行之后相机表现得很奇怪。

https://glitch.com/~aframe-lookat-cam-not-working

如果你垂直拖动相机看起来像这样。代码相同但行为不同。

为什么？

我在这里发现了同样的问题描述：

Answer 3

我终于可以让它工作了。我是 Threejs 和 aframe 的新手，当然我不太了解旋转、位置、世界坐标，但我认为我做得不错。这里是 link:

https://glitch.com/~aframe-lookat-camera-working

希望对以后的人有用。

How to look to objects using lookAt() with a-frame camera component and look-controls