A-Frame中文教程

场景(Scene)

场景是一个通过<a-scene>来表示的元素。场景是一个全局根对象,所有的实体都被包含在场景中。

场景从实体(Entity)类继承而来,因此它继承了实体类所有的属性和方法,可以附加组件以及在渲染循环之前等待所有子节点(例如,<a-assets><a-entity>)被加载完成。

<a-scene>帮助我们处理所有three.js和WebVR公式化代码:

例子

<a-scene>
<a-assets>
<img id="texture" src="texture.png">
</a-assets>
<a-box src="#texture"></a-box>
</a-scene>

属性

名称 描述
behaviors 带tick方法的组件数组,将在每帧都运行。
camera 当前three.js相机。
canvas canvas元素的引用。
isMobile 运行环境是否是移动设备
object3D THREE.Scene对象。
renderer 当前THREE.WebGLRenderer.
renderStarted 场景是否在渲染中。
effect 通过传递当前渲染器到THREE.VREffect来创建的VR渲染器。
systems 实例化的systems.
time 以秒为单位的场景已正常运行时间。

方法

名称 描述
enterVR 切换到立体声渲染并将内容发布到头戴设备上。需要在用户生成的事件如click处理程序中调用。第一次进入虚拟现实页面。
exitVR 切换到单通道渲染器且停止在头戴设备上呈现内容。
reload 把场景还原到原来的状态。

事件

名称 描述
enter-vr 用户进入VR,内容开始呈现在头戴设备上。
exit-vr 用户退出VR,内容停止显示在头戴设备上。
loaded 所有节点都已经被加载。
renderstart 渲染循环已经开始。

Scene组件

组件可以附加到场景以及实体上:

<a-scene fog stats>

A-Frame自带如下一些组件来配置场景:

在场景中运行内容脚本

推荐的方法是编写组件,并将其附加到场景元素。场景及其子元素将在这个组件之前初始化。

AFRAME.registerComponent('do-something', {
init: function () {
var sceneEl = this.el;
}
});
<a-scene do-something></a-scene>

如果出于某些特殊原因,您不愿意编写专用组件,则需要等待场景完成初始化和附加:

var scene = document.querySelector('a-scene');
if (scene.hasLoaded) {
run();
} else {
scene.addEventListener('loaded', run);
}
function run () {
var entity = scene.querySelector('a-entity');
entity.setAttribute('material', 'color', 'red');
}