Java跨域请求cooking共享,A-Frame核心概念 | WebVR中文文档 | A-Frame在线教程 | 踏得网...

资源管理系统(Asset Management System)

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

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

我们把资源放在里面，并且我们把放在中。资源包括：

- 杂项资产，如三维模型和材料

- 音频文件

- 图像纹理

- 视频纹理

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

示例

我们可以在中定义资源，然后在实体中我们可以使用查询器来引用这些资源：

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

跨域资源共享(CORS)

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

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

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

预加载音频和视频

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

设置超时

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

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

事件(Events)

由于和是A-Frame里的节点(nodes)，它们加载完成时将发出loaded事件：

事件名称

描述

loaded

所有资源都已经加载完成，或者已超时。

timeout

资源加载超时。

单个资源的加载进度

调用three.js

FileLoader。我们可以把用于任何文件类型。当结束时，它将设置其data

成员为响应文本。

事件名称

描述

error

获取错误。事件详情里面包含了一个带XMLHttpRequest实例的xhr。

progress

进度上报。事件详情里面包含了一个带XMLHttpRequest实例的xhr，loadedBytes和totalBytes。

loaded

通过src指向的资源已经加载完成。

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

事件名称

描述

load

图像已加载。

HTML媒体元素(HTMLMediaElement)

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

事件名称

描述

error

资源加载时发生错误。

loadeddata

已加载数据。

progress

进度。

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

指定响应类型

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

运行原理

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

是一个ANode，它将等待其子节点加载完成后才加载自身。并且由于是的子元素，场景事实上将需要等待所有资源加载完成。我们还添加额外的加载逻辑到

上，比如它们显式的等待加载，如果我们定义了。

使用THREE.FileLoader来获取文件。three.js存储返回数据在THREE.Cache中。每个three.js加载器从THREE.FileLoader继承而来，无论它们是一个ColladaLoader，OBJLoader,

还是ImageLoader等。它们都能访问中央缓存THREE.Cache。如果A-Frame已经获取了一个文件，那么将无需再次获取，我们可以直接使用缓存中的数据。

这样，由于我们在加载资源时阻塞了实体的初始化，到实体加载完成时，所有的资源必然是已经被加载完成了。只要我们定义，并且实体使用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);

Except where otherwise noted, content on this site is licensed under the Creative Commons Attribution Share-Alike License v3.0 or any later version.

Chinese Version Powered by Techbrood Co.