У меня есть большое количество текстур и моделей для загрузки в мой проект. Я пытаюсь показать индикаторы выполнения, пока все загружается. Я думаю, что 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>