如何在three.js中制作一个加载界面？

Question

我有大量纹理和模型需要加载到我的项目中。在所有内容加载时，我正在尝试显示进度条。 我认为LoadingManager正好符合我的需求，因为它跟踪所有已加载资产的进度。

我正在使用JSONLoader和TextureLoader。

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

var camera, scene, renderer;

 init();
 animate();

 function init() {

   camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
   camera.position.z = 400;

   scene = new THREE.Scene();


   // Load Textures 
   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');
  
   // Materials
   var material = {
     "texture1": new THREE.MeshPhongMaterial({ map: modeltexture1 }),
     "texture2": new THREE.MeshPhongMaterial({ map: modeltexture2 }),
     "texture3": new THREE.MeshPhongMaterial({ map: modeltexture3 }),
     "texture4": new THREE.MeshPhongMaterial({ map: modeltexture4 }),
   }

   // Lights
   scene.add(new THREE.AmbientLight(0xcccccc));
   pointLight = new THREE.PointLight(0xff4400, 5, 30);
   pointLight.position.set(5, 0, 0);
   scene.add(pointLight);
  
   var loader = new THREE.JSONLoader();


   // Model1
   var model1 = new THREE.Object3D;
   scene.add(model1);

   loader.load("model1.js", function(geometry) {
     var mainmodel1 = new THREE.Mesh(geometry, material["texture1"]);
     model1.add(mainmodel1);
   }); 
   
   // Model2
   var model2 = new THREE.Object3D;
   scene.add(model2);

   loader.load("model2.js", function(geometry) {
     var mainmodel2 = new THREE.Mesh(geometry, material["texture2"]);
     model2.add(mainmodel2);
   });
   
   // Model3
   var model3 = new THREE.Object3D;
   scene.add(model3);

   loader.load("model3.js", function(geometry) {
     var mainmodel3 = new THREE.Mesh(geometry, material["texture3"]);
     model3.add(mainmodel3);
   });   
   
   // Model4
   var model4 = new THREE.Object3D;
   scene.add(model4);

   loader.load("model4.js", function(geometry) {
     var mainmodel4 = new THREE.Mesh(geometry, material["texture4"]);
     model4.add(mainmodel4);
   });  
   
   renderer = new THREE.WebGLRenderer();
   renderer.setPixelRatio(window.devicePixelRatio);
   renderer.setSize(window.innerWidth, window.innerHeight);
   document.body.appendChild(renderer.domElement);

   //

   window.addEventListener('resize', onWindowResize, false);

 }

 function onWindowResize() {

   camera.aspect = window.innerWidth / window.innerHeight;
   camera.updateProjectionMatrix();

   renderer.setSize(window.innerWidth, window.innerHeight);

 }

 function animate() {

   requestAnimationFrame(animate);
   renderer.render(scene, camera);

 }

body {
  margin: 0;
}
canvas {
  width: 100%;
  height: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js"></script>

- Alexander Hein

---

所有的加载器都是从一个名为Loader的原型派生而来，它支持onLoadProgress和onLoadComplete回调函数，您可以使用它们来确定您想要加载的项目总量中已经加载了多少。当进度或完成被触发时，更新进度条。您可能实际上希望在任何其他代码之前加载所有内容（而不是将运行代码与加载代码混合在一起）。请在文档中阅读有关加载器的信息：http://threejs.org/docs/index.html#Reference/Loaders/Loader - somethinghere

我不确定你的代码能否正常工作，因为你正在使用相同的加载器或加载所有的JSON文件，但在尝试加载下一个文件之前没有等待它们完成。 - 2pha

使用LoadingManager的详细说明请参见文档页面。 - 2pha

Answer 1

##LoadingManager更新

正如@2pha所指出的那样，下面的内容是无意义的，因为THREE已经实现了一个加载管理器-下面的内容将保留以备后人参考，但请看一下这个链接：

https://threejs.org/docs/?q=loading#api/loaders/managers/LoadingManager

非常简单：

var progress = document.createElement('div');
var progressBar = document.createElement('div');

progress.appendChild(progressBar);

document.body.appendChild(progress);

var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
  progressBar.style.width = (loaded / total * 100) + '%';
};

function addRandomPlaceHoldItImage(){
  var r = Math.round(Math.random() * 4000);
  new THREE.ImageLoader(manager).load('//picsum.photos/' + r + '/' + r);
}

for(var i = 0; i < 10; i++) addRandomPlaceHoldItImage();

div {
  width: 200px;
  height: 20px;
  background: #000;
  border: 2px solid #000;
}
div > div {
  width: 200px;
  height: 20px;
  background: red;
  border: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js"></script>

原始帖子

像下面这样做应该可以完成你的任务——注意，我只是快速测试了一下，可能还有一些改进需要做（包括在 THREE js 中使用 progress 回调）。我也没有完全完善它，但它给出了如何实现这一点的一般方法。我也没有实现错误处理等等......这些需要花费更长的时间，但你可以得到一般的想法。

你可以添加符合 THREE 中 type + Loader 的新类型的加载器以及它们的来源，然后通过简单地调用 load 来初始化加载。

希望它有所帮助。

（我还编写了一个随机函数来从 placehold.it 获取一些随机图像，因为反复使用相同的结果意味着缓存会占用服务器资源。）

function LoaderProgress(callback){
  this.length     = -1;
  this.complete   = 0;
  this.domElement = document.createElement('div');
  this.progress   = document.createElement('div');
  
  this.domElement.appendChild(this.progress);
  this.domElement.className = 'loader-progress-wrapper';
  this.progress.className   = 'loader-progress-progress';
  this.progress.style.width = '0%';
  
  this.callback = callback || function(){};
}
LoaderProgress.prototype.add = function(type, src){
  var result = this[++this.length] = {
    loader: new THREE[type + 'Loader'],
    complete: false,
    source: src
  };
  return result;
}
LoaderProgress.prototype.load = function(){
  this.complete = 0;
  for(var i = 0; i < this.length; i++){
    var current = this[i];
    if(!current.complete){
      current.loader.load(this[i].source, function(result){
        current.complete = result;
        this.complete++;
        this.update();
      }.bind(this));
    }
  }
  return this;
}
LoaderProgress.prototype.update = function(a){
  var progress = this.complete / this.length;
  this.progress.style.width = (progress * 100) + '%';
  if(progress === 1) this.callback(this);
  console.log(progress);
  return progress;
}

var loader = new LoaderProgress(function(){
  // Execute code that needfs the loaded elements here
  alert('All are loaded');
});

document.body.appendChild(loader.domElement);

function addRandomPlaceHoldItImage(){
  var r = Math.round(Math.random() * 4000);
  loader.add('Image', '//picsum.photos/' + r + '/' + r);
}

for(var i = 0; i < 10; i++)
  addRandomPlaceHoldItImage();

loader.load();

.loader-progress-wrapper {
  width: 200px;
  height: 20px;
  background: #000;
  border: 2px solid #000;
}
.loader-progress-progress {
  width: 200px;
  height: 20px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js"></script>

- somethinghere

---

为什么不使用LoadingManager？ - 2pha

@2pha 实际上我从来没有真正研究过它，老实说，我自己也只是刚开始接触 THREE js。如果你能告诉我它的工作原理，请将其发布为答案，我会点赞 :) - 编辑：哦，那个确实很简单。不明白为什么我没有去了解它。我会将其添加到我的帖子顶部。 - somethinghere

哦！太棒了。 - aboutqx

Answer 2

文档：http://threejs.org/docs/#Reference/Loaders/TextureLoader

示例：http://threejs.org/examples/#webgl_loader_obj

代码：

  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;

它解决了我曾经遇到的一个类似的问题——4MB的纹理需要一些时间通过网络加载...

- Michal Stefanow