Javascript 如何在three.js中创建加载屏幕？

我有大量的纹理和模型要加载到我的项目中。我试图在加载所有内容时显示进度条。 我认为加载管理器在跟踪所有加载资产的进度时，正是我所需要的

我正在使用JSONLoader和TextureLoader

如果有人能告诉我如何在示例代码中实现这一点，那就太棒了

var摄像机、场景、渲染器；
init（）；
制作动画（）；
函数init（）{
摄像头=新的三个透视摄像头（70，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=400；
场景=新的三个。场景（）；
//加载纹理
var modeltexture1=new THREE.TextureLoader（）.load（'modeltexture1.jpg'）；
var modeltexture2=new THREE.TextureLoader（）.load（'modeltexture2.jpg'）；
var modeltexture3=new THREE.TextureLoader（）.load（'modeltexture3.jpg'）；
var modeltexture4=new THREE.TextureLoader（）.load（'modeltexture4.jpg'）；
//材料
可变材料={
“texture1”：新的3.MeshPhongMaterial（{map:modeltexture1}），
“texture2”：新的3.MeshPhongMaterial（{map:modeltexture2}），
“texture3”：新的3.MeshPhongMaterial（{map:modeltexture3}），
“texture4”：新的3.MeshPhongMaterial（{map:modeltexture4}），
}
//灯光
添加（新的三点环境光（0xCCCC））；
点光源=新的三点光源（0xff4400,5,30）；
点光源位置设置（5,0,0）；
场景。添加（点光源）；
var loader=new THREE.JSONLoader（）；
//模型1
var model1=新的3.Object3D；
场景。添加（模型1）；
load（“model1.js”，函数（几何体）{
var mainmodel1=新的三点网格（几何体、材质[“纹理1”）；
模型1.添加（主模型1）；
}); 
//模型2
var model2=新的三个对象3d；
场景。添加（模型2）；
load（“model2.js”，函数（几何体）{
var mainmodel2=新的三点网格（几何体、材质[“texture2]”）；
模型2.add（主模型2）；
});
//模型3
var model3=新的3.Object3D；
场景。添加（模型3）；
load（“model3.js”，函数（几何体）{
var mainmodel3=新的三点网格（几何体、材质[“纹理3”）；
模型3.添加（主模型3）；
});   
//模型4
var model4=新的3.Object3D；
场景。添加（模型4）；
load（“model4.js”，函数（几何体）{
var mainmodel4=新的三点网格（几何体、材质[“纹理4”）；
模型4.添加（主模型4）；
});  
renderer=new THREE.WebGLRenderer（）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
函数animate（）{
请求动画帧（动画）；
渲染器。渲染（场景、摄影机）；
}

正文{
保证金：0；
}
帆布{
宽度：100%；
身高：100%
}

加载管理器更新 正如@2pha所指出的，下面的内容毫无意义，因为三个已经实现了加载管理器——下面的内容将留待后人使用，但请看一看：

简易豌豆：

var progress=document.createElement（'div'）；
var progressBar=document.createElement（'div'）；
progress.appendChild（progressBar）；
文件.正文.附件（进度）；
var-manager=new-THREE.LoadingManager（）；
manager.onProgress=功能（项目、已加载、总计）{
progressBar.style.width=（已加载/总计*100）+'%'；
};
函数addRandomPlaceHoldinImage（）{
var r=Math.round（Math.random（）*4000）；
新的3.ImageLoader（管理器）.load（'http://placehold.it/“+r+”x“+r）；
}
对于（var i=0；i<10；i++）addRandomPlaceHoldinImage（）
div{
宽度：200px；
高度：20px；
背景：#000；
边框：2倍实心#000；
}
div>div{
宽度：200px；
高度：20px；
背景：红色；
边界：无；
}
文档：

例如：

代码：

它解决了一个类似的问题，我有一个-4MB的纹理，需要一些时间才能加载到导线上…
所有加载程序都是从一个名为
加载程序
的原型中派生出来的，它支持
onLoadProgress
和
onLoadComplete
回调，您可以使用这些回调来确定要加载的项目总数的加载量。触发进度或完成后，更新栏。实际上，您可能希望在加载任何其他代码之前加载所有代码（而不是将正在运行的代码和加载的代码混合在一起）。阅读文档中的加载程序：我不确定你的代码是否能正常工作，因为你正在使用同一个加载程序或加载所有json文件，但不会等到它们完成后再尝试加载下一个。使用加载管理器详细介绍了为什么不使用加载管理器？@2pha实际上从未真正研究过它，说实话，我一开始只有三个J。如果你能告诉我这是怎么回事，把它作为一个答案贴出来，我会投票给你：）-编辑：哦，妈的，那很简单。我不明白为什么我没有调查。我会把它添加到我的文章的顶端。你得到了一个否决票，因为我不认为这是正确的答案。OP特别询问如何使用LoadingManager。你改变答案后我又投了赞成票。在发牢骚之前，也许去看看我对堆栈上的three.js标记的贡献吧！那太好了
  var sphereMaterial = new THREE.MeshBasicMaterial();

  var onProgress = function ( xhr ) {
    if ( xhr.lengthComputable ) {
      var percentComplete = xhr.loaded / xhr.total * 100;
      console.log( Math.round(percentComplete, 2) + '% downloaded' );
    }
  };

  var loader = new THREE.TextureLoader();
  var texture = loader.load("___4MB_IMAGE.JPG___", undefined, onProgress);
  sphereMaterial.map = texture;