场景（Scene）

优质

小牛编辑

128浏览

2023-12-01

场景是一个通过<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 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自带如下一些组件来配置场景：

embedded - 从canvas去除全屏模式。
fog - 添加雾效果。
keyboard-shortcuts - 切换键盘快捷键。
inspector - 注入A-Frame查看器。
stats - 切换性能状态。
vr-mode-ui - 切换进入或退出VR的界面。

在场景中运行内容脚本

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

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');}