A-Frame中文教程

资源管理系统(Asset Management System)

A-Frame允许我们把资源集中放在一个地方,便于预加载和缓存来达到更好的性能。

游戏和富客户端3D体验传统上会在渲染场景之前预加载资产,如模型或纹理贴图,这样可以确保资源不会出现视觉丢失,避免场景试图在渲染时才去获取资产所导致的性能问题。

我们把资源放在<a-assets>里面,并且我们把<a-assets>放在<a-scene>中。资源包括:

在浏览器获取(或发生错误退出)所有资源或资源超时之前,场景不会呈现或初始化。

示例

我们可以在<a-assets>中定义资源,然后在实体中我们可以使用查询器来引用这些资源:

<a-scene>
<!-- Asset management system. -->
<a-assets>
<a-asset-item id="horse-obj" src="horse.obj"></a-asset-item>
<a-asset-item id="horse-mtl" src="horse.mtl"></a-asset-item>
<a-mixin id="giant" scale="5 5 5"></a-mixin>
<audio id="neigh" src="neigh.mp3"></audio>
<img id="advertisement" src="ad.png">
<video id="kentucky-derby" src="derby.mp4"></video>
</a-assets>
<!-- Scene. -->
<a-plane src="advertisement"></a-plane>
<a-sound src="#neigh"></a-sound>
<a-entity geometry="primitive: plane" material="src: #kentucky-derby"></a-entity>
<a-entity mixin="giant" obj-model="obj: #horse-obj; mtl: #horse-mtl"></a-entity>
</a-scene>

场景及其实体在初始化和呈现之前将等待所有资源加载完毕(或者超时)。

跨域资源共享(CORS)

由于A-Frame使用XHRs来获取资源,如果资源放在不同域中,浏览器安全性要求资源通过跨域资源共享消息头来提供。否则,我们必须把资源托管在和场景应用相同域名上。

作为一个可选项,GitHub Pages支持跨域资源共享消息头,我们把它作为一个简单的发布平台。

如果设置了跨域资源共享消息头<a-assets>将自动给媒体元素(如<audio>, <img><video>)设置crossorigin属性,如果它检测到资源是在不同域名上。

预加载音频和视频

音频和视频资源仅在我们设置了autoplay或者preload="auto"是才会阻塞场景:

<a-scene>
<a-assets>
<!-- These will not block. -->
<audio src="blockus.mp3"></audio>
<video src="loadofblocks.mp4"></video>
<!-- These will block. -->
<audio src="blocky.mp3" autoplay></audio>
<video src="blockiscooking.mp4" preload="auto"></video>
</a-assets>
</a-scene>

设置超时

我们可以设置一个超时,当到达时,场景将开始渲染并且实体将开始初始化,而不管是否所有资源都已经加载。默认超时为3秒。要设置不同的超时,我们只需要将毫秒数传递给timeout属性:

如果有些资源需要很长时间才能加载,我们可能需要设置一个适当的超时,用户不会一直等待下去,以防他们网络很慢。

<a-scene>
<a-assets timeout="10000">
<!-- You got until the count of 10 to load else the show will go on without you. -->
<img src="bigimage.png">
</a-asset>
</a-scene>

事件(Events)

由于<a-assets><a-asset-item>是A-Frame里的节点(nodes),它们加载完成时将发出loaded事件:

事件名称 描述
loaded 所有资源都已经加载完成,或者已超时。
timeout 资源加载超时。

单个资源的加载进度

<a-asset-item>

<a-asset-item>调用three.js FileLoader。我们可以把<a-asset-item>用于任何文件类型。当结束时,它将设置其data 成员为响应文本。

事件名称 描述
error 获取错误。事件详情里面包含了一个带XMLHttpRequest实例的xhr
progress 进度上报。事件详情里面包含了一个带XMLHttpRequest实例的xhrloadedBytestotalBytes
loaded 通过src指向的资源已经加载完成。

<img>

图像是标准的DOM元素,因此我们可以侦听标准的DOM事件。

事件名称 描述
load 图像已加载。

HTML媒体元素(HTMLMediaElement)

音频和视频资源是HTMLMediaElement。对应的浏览器触发事件有些特别,列举如下:

事件名称 描述
error 资源加载时发生错误。
loadeddata 已加载数据。
progress 进度。

A-Frame使用这些进度事件,和浏览器资源缓存时长相比较,来检测何时资源加载完成。

指定响应类型

通过<a-asset-item>获取的内容将以普通文本形式返回。如果我们需要不同的形式比如arraybuffer,可以使用<a-asset-item>response-type属性来指定:

<a-asset-item response-type="arraybuffer" src="model.gltf"></a-asset-item>

运行原理

A-Frame中所有元素都从<a-node>继承而来,AFRAME.ANode原型。ANode控制加载和初始化顺序。要初始化一个元素(无论它是<a-assets>, <a-asset-item>, <a-scene>,还是<a-entity>),其子元素必须已经初始化。节点是自下而上初始化的。

<a-assets>是一个ANode,它将等待其子节点加载完成后才加载自身。并且由于<a-assets><a-scene>的子元素,场景事实上将需要等待所有资源加载完成。我们还添加额外的加载逻辑到 <a-entity>上,比如它们显式的等待<a-assets>加载,如果我们定义了<a-assets>

<a-asset-item>使用THREE.FileLoader来获取文件。three.js存储返回数据在THREE.Cache中。每个three.js加载器从THREE.FileLoader继承而来,无论它们是一个ColladaLoaderOBJLoader, 还是ImageLoader等。它们都能访问中央缓存THREE.Cache。如果A-Frame已经获取了一个文件,那么将无需再次获取,我们可以直接使用缓存中的数据。

这样,由于我们在加载资源时阻塞了实体的初始化,到实体加载完成时,所有的资源必然是已经被加载完成了。只要我们定义<a-asset-item>,并且实体使用THREE.FileLoader来加载资源,那么缓存机制将自动工作。

访问文件加载器(FileLoader)和缓存(Cache)

我们也可以直接访问three.js的FileLoader

console.log(document.querySelector('a-assets').fileLoader);

To access the cache that stores XHR responses:

console.log(THREE.Cache);