Question

我看到A-Frame用于通过标记/ 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中的所有元素/对象都是实体。我们可以使用标准的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附加/插入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>由几何和材质组件组成。所以它看起来像是在引擎盖下：

<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，模板引擎）配合使用。

如何在A-Frame中使用JavaScript？

1 个答案:

操纵DOM

实体组分

操纵组件

集成