如何在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>

Answer 1

LoadingManager更新

正如@ 2pha指出的那样，下面的内容毫无意义，因为THREE已经实现了一个加载管理器 - 以下内容将留给子孙后代，但看看这个：

$sum

易peasy：

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>

progress

原帖

下面的内容应该可以解决问题 - 请注意，我刚刚对其进行了快速测试，并且可能需要进行一些改进（包括在三个js中使用type + Loader回调）。我也没有完全改进它，但它为您提供了如何执行此操作的一般实现。我还没有实现错误处理程序等等......那些需要花费更长时间的东西，但你得到了一般的想法。

您添加新类型的加载器（符合THREE中的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', 'http://placehold.it/' + r + 'x' + 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>

Private Sub Workbook_Open()
Dim WK As Worksheet

Set WK = Sheet1 'Change it to your sheet number.

If WK.Range("C4").Value < 30 Then
  MsgBox "Maximum allowable loss is at " & WK.Range("C4").Value
End If
End Sub

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纹理需要一些时间来加载电线......