如何在使用three.js和jsonLoader时制作加载屏幕?

时间:2013-05-02 18:09:55

标签: json three.js

我有大量的纹理文件和模型加载到我的项目中。我正在尝试在加载所有内容时显示状态栏或某种加载屏幕。如果有人能给我任何关于如何做到这一点的信息,那就太棒了。

谢谢!

2 个答案:

答案 0 :(得分:8)

您可以使用这样的模式来管理加载过程:

var manager = new THREE.LoadingManager();

manager.onStart = function( item, loaded, total ) {

    console.log( 'Loading started' );

};

manager.onLoad = function() {

    console.log( 'Loading complete' );

};

manager.onProgress = function( item, loaded, total ) {

    console.log( item, loaded, total );

};

manager.onError = function( url ) {

    console.log( 'Error loading' );

};

var loader = new THREE.TextureLoader( manager );

var texture = loader.load( 'texture.jpg', function ( texture ) {

    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set( 2, 2 );

} );

var loader = new THREE.OBJLoader( manager );

loader.load( 'file.obj', function( object ) {

    // your code

 } );

three.js r.85

答案 1 :(得分:8)

所需的最低代码就是:

THREE.DefaultLoadingManager.onProgress = function ( item, loaded, total ) {
    console.log( item, loaded, total );
};

而不是打印到控制台,您可以例如启动渲染循环"如果加载==总计"。 或者/你可以更新任何加载指示器。 (代码来自其中一个示例。)