You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
233 lines
7.1 KiB
233 lines
7.1 KiB
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<base href="../../../../" />
|
|
<script src="page.js"></script>
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
|
</head>
|
|
<body>
|
|
<h1>[name]</h1>
|
|
|
|
<p class="desc">
|
|
其功能是处理并跟踪已加载和待处理的数据。如果未手动设置加强管理器，则会为加载器创建和使用默认全局实例加载器管理器
|
|
- 请参阅 [page:DefaultLoadingManager].<br /><br />
|
|
|
|
一般来说，默认的加载管理器已足够使用了，但有时候也需要设置单独的加载器 - 例如，如果你想为对象和纹理显示单独的加载条。
|
|
|
|
</p>
|
|
|
|
<h2>代码示例</h2>
|
|
|
|
<p>
|
|
下面的例子将介绍，如何使用加载管理器来跟踪 [page:OBJLoader] 的加载进度流程。
|
|
</p>
|
|
|
|
<code>
|
|
const manager = new THREE.LoadingManager();
|
|
manager.onStart = function ( url, itemsLoaded, itemsTotal ) {
|
|
|
|
console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
|
|
|
|
};
|
|
|
|
manager.onLoad = function ( ) {
|
|
|
|
console.log( 'Loading complete!');
|
|
|
|
};
|
|
|
|
|
|
manager.onProgress = function ( url, itemsLoaded, itemsTotal ) {
|
|
|
|
console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
|
|
|
|
};
|
|
|
|
manager.onError = function ( url ) {
|
|
|
|
console.log( 'There was an error loading ' + url );
|
|
|
|
};
|
|
|
|
const loader = new THREE.OBJLoader( manager );
|
|
loader.load( 'file.obj', function ( object ) {
|
|
|
|
//
|
|
|
|
} );
|
|
</code>
|
|
|
|
<p>
|
|
|
|
除了观察进度流程之外，还可以使用LoadingManager在加载期间覆写资源URL。当某资源来自拖拽事件、
|
|
WebSockets、WebRTC或其他API时，此方法可以有所帮助。下面显示了如何使用Blob URL加载内存模型的示例。
|
|
</p>
|
|
|
|
<code>
|
|
// 将文件拖入网页时创建的Blob或File对象。
|
|
const blobs = {'fish.gltf': blob1, 'diffuse.png': blob2, 'normal.png': blob3};
|
|
|
|
const manager = new THREE.LoadingManager();
|
|
|
|
// 使用URL回调初始化加载管理器。
|
|
const objectURLs = [];
|
|
manager.setURLModifier( ( url ) => {
|
|
|
|
url = URL.createObjectURL( blobs[ url ] );
|
|
|
|
objectURLs.push( url );
|
|
|
|
return url;
|
|
|
|
} );
|
|
|
|
// 像通常一样加载，然后撤消blob URL
|
|
const loader = new THREE.GLTFLoader( manager );
|
|
loader.load( 'fish.gltf', (gltf) => {
|
|
|
|
scene.add( gltf.scene );
|
|
|
|
objectURLs.forEach( ( url ) => URL.revokeObjectURL( url ) );
|
|
|
|
});
|
|
</code>
|
|
|
|
<h2>例子</h2>
|
|
|
|
<p>
|
|
[example:webgl_loader_fbx WebGL / loader / fbx]<br />
|
|
[example:webgl_loader_obj WebGL / loader / obj]<br />
|
|
[example:webgl_materials_physical_reflectivity WebGL / materials / physical / reflectivity]<br />
|
|
[example:webgl_postprocessing_outline WebGL / postprocesing / outline]
|
|
</p>
|
|
|
|
<h2>构造方法</h2>
|
|
|
|
<h3>[name]( [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
|
|
<p>
|
|
[page:Function onLoad] — (可选) 所有加载器加载完成后，将调用此函数。<br />
|
|
[page:Function onProgress] — (可选) 当每个项目完成后，将调用此函数。<br />
|
|
[page:Function onError] — (可选) 当一个加载器遇到错误时，将调用此函数。 <br />
|
|
|
|
创建一个新的 [name].
|
|
</p>
|
|
|
|
|
|
<h2>属性</h2>
|
|
|
|
<h3>[property:Function onStart]</h3>
|
|
<p>
|
|
此函数在加载开始时被调用。
|
|
有如下参数：<br />
|
|
[page:String url] — 被加载的项的url。<br />
|
|
[page:Integer itemsLoaded] — 目前已加载项的个数。<br />
|
|
[page:Integer itemsTotal] — 总共所需要加载项的个数。<br /><br />
|
|
|
|
该函数默认为undefined。
|
|
</p>
|
|
|
|
<h3>[property:Function onLoad]</h3>
|
|
<p>
|
|
所有的项目加载完成后将调用此函数。默认情况下，该函数是未定义的，除非在构造函数中传入。
|
|
</p>
|
|
|
|
<h3>[property:Function onProgress]</h3>
|
|
<p>
|
|
此方法加载每一个项，加载完成时进行调用。
|
|
有如下参数：<br />
|
|
[page:String url] — 被加载的项的url。<br />
|
|
[page:Integer itemsLoaded] — 目前已加载项的个数。<br />
|
|
[page:Integer itemsTotal] — 总共所需要加载项的个数。<br /><br />
|
|
|
|
默认情况下，该函数为undefined，除非在构造函数中传入。
|
|
</p>
|
|
|
|
<h3>[property:Function onError]</h3>
|
|
<p>
|
|
此方法将在任意项加载错误时，进行调用。
|
|
有如下参数：<br />
|
|
[page:String url] — 加载发生错误的项目的url<br /><br />
|
|
|
|
默认情况下，该函数为undefined，除非在构造函数中传入。
|
|
</p>
|
|
|
|
|
|
<h2>方法</h2>
|
|
|
|
<h3>[method:this addHandler]( [param:Object regex], [param:Loader loader] )</h3>
|
|
<p>
|
|
[page:Object regex] — A regular expression.<br />
|
|
[page:Loader loader] — The loader.
|
|
<p>
|
|
Registers a loader with the given regular expression. Can be used to define what loader should be used in
|
|
order to load specific files. A typical use case is to overwrite the default loader for textures.
|
|
</p>
|
|
<code>
|
|
// add handler for TGA textures
|
|
manager.addHandler( /\.tga$/i, new TGALoader() );
|
|
</code>
|
|
|
|
<h3>[method:Loader getHandler]( [param:String file] )</h3>
|
|
<p>
|
|
[page:String file] — The file path.
|
|
<p>
|
|
Can be used to retrieve the registered loader for the given file path.
|
|
</p>
|
|
|
|
<h3>[method:this removeHandler]( [param:Object regex] )</h3>
|
|
<p>
|
|
[page:Object regex] — A regular expression.
|
|
<p>
|
|
Removes the loader for the given regular expression.
|
|
</p>
|
|
|
|
<h3>[method:String resolveURL]( [param:String url] )</h3>
|
|
<p>
|
|
[page:String url] — 所要加载的url<br /><br />
|
|
|
|
给定URL，使用URL修饰符回调（如果有）并返回已解析的URL。如果未设置URL修饰符，则返回原始URL。
|
|
</p>
|
|
|
|
<h3>[method:this setURLModifier]( [param:Function callback] )</h3>
|
|
<p>
|
|
[page:Function callback] — 设置URL修饰符成功时回调。使用url参数进行回调，并且必须返回 [page:String resolvedURL] 。<br /><br />
|
|
|
|
如果设置了回调，则在发送请求之前将向每个资源URL传递回调。回调可以返回最初的URL，也可以返回新URL以覆盖加载行为。
|
|
此行为可用于从.ZIP、拖拽API和数据URI中加载资源文件。
|
|
</p>
|
|
|
|
|
|
<br />
|
|
<p>
|
|
<em>Note: The following methods are designed to be called internally by loaders. You shouldn't call
|
|
them directly.</em>
|
|
</p>
|
|
|
|
<h3>[method:undefined itemStart]( [param:String url] )</h3>
|
|
<p>
|
|
[page:String url] — 所要加载的url<br /><br />
|
|
|
|
任何使用管理器的加载器都会调用此方法， 当加载器需要开始加载URL时。
|
|
</p>
|
|
|
|
<h3>[method:undefined itemEnd]( [param:String url] )</h3>
|
|
<p>
|
|
[page:String url] — 所要加载的url<br /><br />
|
|
|
|
任何使用管理器的加载器都会调用此方法， 当加载器需要加载URL结束时。
|
|
</p>
|
|
|
|
<h3>[method:undefined itemError]( [param:String url] )</h3>
|
|
<p>
|
|
[page:String url] — 所要加载的url<br /><br />
|
|
|
|
任何使用管理器的加载器都会调用此方法， 当加载器出现加载错误时。
|
|
</p>
|
|
|
|
<h2>源</h2>
|
|
<p>
|
|
[link:https://github.com/mrdoob/three.js/blob/master/src/loaders/LoadingManager.js src/loaders/LoadingManager.js]
|
|
</p>
|
|
</body>
|
|
</html>
|
|
|