A-Frame：使模型面向观众/屏幕中心或 canvas

Question

我一直在努力让我的模型在框架中始终面向观众。到目前为止，我一直在尝试使用相机组件来实现这一点，两者都是通过在实体中查看：

<a-entity id="entity" look-at="[camera]"></a-entity>

并在正文中添加脚本：

document.querySelector('#ebtity').object3D.lookAt('#camera');

默认相机：

<a-entity id="camera" camera look-controls></a-entity>

不过看起来相机组件并不代表真实世界的相机位置。

我只需要让模型面向观众 - 或者换句话说，始终面向屏幕中心或 canvas。

有人对如何完成这项工作有任何建议吗？

Answer 1

你的方向是对的，

实现这一点的最简单方法是注册一个自定义组件以拥有一个实体面对另一个实体

AFRAME.registerComponent('look-at', {
  schema: { type: 'selector' },

  init: function () {},

  tick: function () {
    this.el.object3D.lookAt(this.data.object3D.position)
  }
})

模式中的选择器类型已经运行 document.querySelector() 所以我们只需要通过 this.data

访问它

刻度函数是运行每帧不断更新对象旋转到目标

在您的场景中，您的相机获得一个 ID，然后将其传递给我们定义的 look-at 组件

<a-entity id="camera" wasd-controls camera look-controls position="0 1.5 0"></a-entity>
  
<a-plane look-at="#camera" ></a-plane>

这是一个工作示例 https://glitch.com/edit/#!/amusing-nervous-jaxartosaurus?path=index.html%3A13%3A7

A-Frame：使模型面向观众/屏幕中心或 canvas

A-Frame: make model face the viewer / center of the screen or canvas

javascript

augmented-reality

aframe