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

Posted 2023-02-27

【中文标题】如何在使用three.js和jsonLoader时制作加载屏幕？

【英文标题】：How to make a loading screen while using three.js and jsonLoader?

【发布时间】：2013-04-27 00:40:19

【问题描述】：

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

谢谢！

【参考方案1】：

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

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

【讨论】：

这些例子太令人困惑了。是否有类似事件或我可以添加到我的 jsonLoader 以了解它的距离？

我想我需要的只是一种方法来告诉它何时完成加载我的所有模型和纹理。这些例子太花哨了，我不知道什么对我真正有用。我已经完成了一个项目，为了遵循这些示例之一，我必须进行很多更改。

我刚刚注意到回调函数是在模型加载完成时调用的，所以我猜测一旦我的所有回调函数被调用，就意味着一切都完成了加载。我要试试这个。

.. 太棒了 ..... 解决了我的问题 .... 非常感谢 .... :) ,, "var LoadFontmanager = new THREE.LoadingManager(); LoadFontmanager.onLoad = function( ) init(); ; loadFont(); function loadFont() var loader = new THREE.FontLoader(LoadFontmanager); loader.load( 'js/fonts/helvetiker_regular.typeface.json', function ( font ) main_font = 字体; ); "

【参考方案2】：

最少需要的代码就是这样：

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

例如，您可以启动渲染循环“如果已加载 == 总计”，而不是打印到控制台。 或者/并且您可以更新任何加载指示符。 （代码来自示例之一。）

【讨论】：

onProgress 实际上只返回当前正在加载的文件的路径