场景(Scene)
场景是一个通过<a-scene>
来表示的元素。场景是一个全局根对象,所有的实体都被包含在场景中。
场景从实体(Entity)
类继承而来,因此它继承了实体类所有的属性和方法,可以附加组件以及在渲染循环之前等待所有子节点(例如,<a-assets>
和<a-entity>
)被加载完成。
<a-scene>
帮助我们处理所有three.js和WebVR公式化代码:
- 设置画布(canvas),渲染器(renderer)以及渲染循环
- 缺省相机和光照
- 设置webvr-polyfill, VREffect
- 添加进入VR的界面,来启动WebVR API
例子
<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-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'); }
|