A-Frame架构 WebXR 虚拟现实开发：1、Introduction —— Entity-Component-System

A-Frame Documents

ECS

Entity-Component-System

• Entity 实体：类似 HTML 的

  ，场景中组件的容器。是空的，不含任何对象，不做任何渲染

• Component 组件：场景中实体的属性，提供外观/行为/函数等，即插即用，可重用等

• System 系统：为组件类别提供全局管理和全局服务

Controls Components:

• tracked-controls: Hook into the Gamepad API for pose.
• vive-controls: Vive button mappings.
• oculus-touch-controls: Oculus button mappings.
• hand-controls: Appearance (model), gestures, and events.
• laser-controls: Laser to interact with menus and UI.
• sphere-collider: Listen when hand is in contact with an object.
• grab: Provide ability to grab objects.
• throw: Provide ability to throw objects.
• event-set=“_event: grabstart; visible: false”: Hide hand when grabbing object.
• event-set=“_event: grabend; visible: true”: Show hand when no longer grabbing object.

Declarative DOM-Based ECS 基于 DOM 的声明式 ECS：

• 引用其他实体

document.querySelector("#player");

• 事件通信

ball.emit("collided");

• DOM API 管理生命周期

.setAttribute .removeAttribute .createElement .removeChild

• 根据选择特定属性来过滤实体

document.querySelector("[enemy]:not([alive])");

A-Frame 生命周期

AFRAME.registerComponent("foo", {
  schema: {
    bar: { type: "number" },
    baz: { type: "string" },
  },

  init: function () {
    // Do something when component first attached.
  },

  update: function () {
    // Do something when component's data is updated.
  },

  remove: function () {
    // Do something when the component or its entity is detached.
  },

  tick: function (time, timeDelta) {
    // Do something on every scene tick or frame.
  },
  pause: function () {},
  play: function () {},
});

<a-entity foo="bar: 5; baz: bazValue"></a-entity>

Unpkg.com Jsdelivr.com

// 自动托管NPM内容，解析语义版本，拿到js
https://unpkg.com/<npm package name>@<version>/<path to file>

// 若不需要最新版，不要加入version
https://unpkg.com/<npm package name>/<path to file>

// Unpkg转Jsdelivr
https://www.jsdelivr.com/unpkg
// github转Jsdelivr
https://www.jsdelivr.com/github