如何在three.js中制作加载屏幕? [英] How to make a loading screen in three.js?
问题描述
我有大量的纹理和模型要加载到我的项目中.我正在尝试在加载所有内容时显示进度条.我认为 LoadingManager 正是我需要的，因为它跟踪所有加载资产的进度.
I have a large amount of textures and models to load into my project. I am trying to show a progress bars while everything is loading. I think the LoadingManager does just what I need as it tracks the progress of all loaded assets.
我正在使用 JSONLoader 和 TextureLoader.
I'm using the JSONLoader and TextureLoader.
如果有人能告诉我如何在示例代码中实现这一点，那就太棒了.
If anyone could show me how to do implement this in the example code would be awesome.
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>推荐答案
LoadingManager 更新
正如@2pha 指出的那样，以下内容毫无意义，因为 THREE 已经实现了加载管理器 - 以下内容将保留给后代，但请看一下:
LoadingManager Update
as @2pha points out, the below is pointless as THREE already implements a loading Manager - the below will remain for posterity, but have a look at this:
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('http://placehold.it/' + r + 'x' + 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>像下面这样的东西应该可以帮到你 - 请注意我刚刚快速测试了它，可能有一些改进(包括在三个 js 中使用 progress 回调).我也没有完全改进它，但它为您提供了如何做到这一点的一般实现.我也没有实现错误处理程序等......这些事情需要更长的时间来完成，但你明白了一般的想法.
Something like the below should do your trick - mind that I have just quickly tested it and there is probably a couple of improvements to make (including using the progress callback in THREE js). I haven't fully refined it either, but it gives you a general implementation of how to do this. I also haven't implemented an error handler, etc... Those are things that take a bit longer to make, but you get the general idea.
您添加新类型的加载器(符合三个中的 type + Loader)及其来源，然后通过简单地调用 load 来启动加载.
You add new types of loaders (that conform to the type + Loader in THREE) and their sources, then initiating the load by simply calling load.
希望有帮助.
(我还做了一个随机函数来从 placehold.it 获取一些随机图像，因为一遍又一遍地使用相同的结果意味着缓存会杀死服务器.)
(I also made a random function to get some random images from placehold.it since using the same results over and over means that caching kills the server.)
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>这篇关于如何在three.js中制作加载屏幕?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
