如何使用 JavaScript 和 A-Frame？

Question

我看到 A-Frame 仅用于构建虚拟现实体验 markup/HTML。我如何在 A-Frame 标记元素旁边使用 JavaScript？

Answer 1

A-Frame是一个JavaScript/three.js框架，HTML只是最外层的声明层。

操纵DOM

https://aframe.io/docs/0.2.0/core/entity.html

A-Frame中的所有elements/objects都是实体。我们可以使用标准 DOM 方法来操作这些元素。

var boxEl = document.querySelector('a-box');
boxEl.setAttribute('width', 5);
boxEl.setAttribute('color', '#FFF');
boxEl.addEventListener('click', function () {
  // If we are using the cursor component.
  boxEl.setAttribute('color', '#FFF');
});
boxEl.emit('some-event');
boxEl.removeAttribute('color');
boxEl.querySelectorAll('a-sphere');

var sphereEl = document.createElement('a-sphere');
sphereEl.setAttribute('radius', 1);
document.querySelector('a-scene').appendChild(sphereEl);
sphereEl.addEventListener('loaded', function () {
  console.log('sphere attached');
});

实体组件

https://aframe.io/docs/0.2.0/core/

A-Frame 基于实体组件系统模式 (ECS) 构建，该模式在游戏开发中很流行，并用于 React 和 PlayCanvas 等引擎。在 ECS 中，每个对象（或实体）都是通过组合组件（不要与 Web 组件混淆）从头开始创建的。组件向实体添加逻辑、行为和外观。

https://aframe.io/docs/0.2.0/core/component.html

我们可以在组件中封装JS：

AFRAME.registerComponent('color-on-click', function () {
  schema: {
    color: {default: 'blue'}
  },

  init: function () {
    var el = this.el;  // Reference to the entity.
    var data = this.data;  // Data passed in through HTML, defined in schema.

    el.addEventListener('click', function () {
      el.setAttribute('color', data.color);
    });
  }
});

并将这些组件附加到我们 HTML 中的实体。请注意我们如何在 JS 中 声明性地 attaching/plugging 到 HTML 中可以接受输入的对象！:

<a-box color="red" color-on-click="color: blue"></a-box>
<a-sphere color="orange" color-on-click="color: white"></a-sphere>

而且这些组件可以做任何超越简单 JS 的事情。我们可以访问整个 three.js API，因此可以轻松包装 three.js 中的任何内容。事实上，我们将世界上我们想要的任何 JS 库包装在组件中，并以声明方式使用它们。

操纵组件

操纵组件的属性类似于操纵HTML属性。 <a-box> 由几何和 material 组件组成。所以它看起来像在引擎盖下：

<a-entity id="box" geometry="primitive: box" material="color: red" scale="2 2 2"></a-entity>

我们可以操纵个别属性：

var boxEl = document.querySelector('#box');
boxEl.setAttribute('geometry', 'width', 5);
boxEl.getAttribute('material').color;
boxEl.removeAttribute('scale');

整合

通过在 HTML 中公开它的 API，A-Frame 可以很好地与现有的 Web 框架和库一起工作，例如 d3、React、Angular、模板引擎。

如何使用 JavaScript 和 A-Frame？

How to use JavaScript with A-Frame?

aframe

操纵DOM

实体组件

操纵组件

整合