一、加载管理器LoadingManager使用介绍
LoadingManager是three.js中的加载管理器，用于监控和管理加载资源的过程。通过使用LoadingManager，我们可以在应用程序中方便地加载各种类型的数据，例如模型、纹理、声音等，而不必为加载过程中的事件处理器和错误处理器编写复杂的代码。
使用LoadingManager是很简单的，首先创建一个新的LoadingManager对象并设置它的事件处理器。例如：
var loadingManager = new THREE.LoadingManager();loadingManager.onLoad = function () {console.log('All resources loaded');};loadingManager.onProgress = function (item, loaded, total) {console.log('Loading... ' + loaded + '/' + total + ' ' + item.url);};loadingManager.onError = function (url) {console.log('Error loading ' + url);};
然后，我们可以通过将LoadingManager对象作为参数传递给各种加载器类来进行实际的加载。例如，使用THREE.OBJLoader加载一个OBJ模型：
var loader = new THREE.OBJLoader(loadingManager);loader.load('model.obj', function (object) {scene.add(object);});
在上述例子中，我们将新创建的LoadingManager对象作为参数传递给了THREE.OBJLoader类的构造函数中，这样我们就可以使用LoadingManager的事件处理器来监控模型的加载过程。如果加载成功，我们可以通过回调函数来处理结果数据。
实际中，LoadingManager经常被用来加载复杂的模型和贴图资源。当应用程序需要加载多个资源时，使用LoadingManager可以有助于减少代码的复杂性，并提高应用程序的性能和可维护性。
二、使用LoadingManager实现对纹理图片的加载监听
效果如图：
在左上角显示一个加载的进度百分比。
核心代码
// 监听图片加载进度条var div = document.createElement("div");div.style.width = "100px";div.style.height = "100px";div.style.position = "fixed";div.style.left = 0;div.style.top = 0;div.style.color = "#15e54d";document.body.appendChild(div);// 设置加载管理器回调函数let event = {url: "", // 图片的urlonLoad: function () {console.log("图片加载完成")},onProgress: function (url, num, total) {console.log("图片加载:", url);console.log("图片加载进度:", num);console.log("图片总数:", total);let value = ((num / total) * 100).toFixed(2) + "%";console.log("加载进度的百分比：", value);div.innerHTML = value;},onError: function (e) {console.log("图片加载出现错误");console.log(e);}};// 设置加载管理器const loadingManager = new THREE.LoadingManager(event.onLoad,event.onProgress,event.onError);// 导入纹理const textureLoader = new THREE.TextureLoader(loadingManager);
完整代码如下
import * as THREE from "three";// 导入轨道控制器import {OrbitControls } from "three/examples/jsm/controls/OrbitControls";// 目标：纹理图片加载监听// 1、创建场景const scene = new THREE.Scene();scene.background = new THREE.Color(0x003261); // 将背景色设置为蓝色// 2、创建相机const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);// 设置相机位置camera.position.set(0, 0, 10);scene.add(camera);// 监听图片加载进度条var div = document.createElement("div");div.style.width = "100px";div.style.height = "100px";div.style.position = "fixed";div.style.left = 0;div.style.top = 0;div.style.color = "#15e54d";document.body.appendChild(div);// 设置加载管理器回调函数let event = {url: "", // 图片的urlonLoad: function () {console.log("图片加载完成")},onProgress: function (url, num, total) {console.log("图片加载:", url);console.log("图片加载进度:", num);console.log("图片总数:", total);let value = ((num / total) * 100).toFixed(2) + "%";console.log("加载进度的百分比：", value);div.innerHTML = value;},onError: function (e) {console.log("图片加载出现错误");console.log(e);}};// 设置加载管理器const loadingManager = new THREE.LoadingManager(event.onLoad,event.onProgress,event.onError);// 导入纹理const textureLoader = new THREE.TextureLoader(loadingManager);const doorColorTexture = textureLoader.load("./textures/door/color.jpg");const doorAplhaTexture = textureLoader.load("./textures/door/alpha.jpg");const doorAoTexture = textureLoader.load("./textures/door/ambientOcclusion.jpg");//导入置换贴图const doorHeightTexture = textureLoader.load("./textures/door/height.jpg");// 导入粗糙度贴图const roughnessTexture = textureLoader.load("./textures/door/roughness.jpg");// 导入金属贴图const metalnessTexture = textureLoader.load("./textures/door/metalness.jpg");// 导入法线贴图const normalTexture = textureLoader.load("./textures/door/normal.jpg");// 添加物体// 参数：长、宽、高、长分段、宽分段、高分段const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1, 100, 100, 100);// 材质const basicMaterial = new THREE.MeshStandardMaterial({map: doorColorTexture, // 漫反射贴图alphaMap: doorAplhaTexture, // 透明贴图transparent: true, // 开启透明 aoMap: doorAoTexture, // 环境光遮挡贴图aoMapIntensity: 1, // 环境光遮挡贴图强度displacementMap: doorHeightTexture, // 置换贴图displacementScale: 0.1, // 置换贴图强度roughness: 1, // 粗糙度roughnessMap: roughnessTexture, // 粗糙度贴图metalness: 1, // 金属度metalnessMap: metalnessTexture, // 金属度贴图normalMap: normalTexture, // 法线贴图// opacity: 0.3,// side: THREE.DoubleSide,});basicMaterial.side = THREE.DoubleSide;const cube = new THREE.Mesh(cubeGeometry, basicMaterial);scene.add(cube);// 给cube添加第二组uvcubeGeometry.setAttribute("uv2",new THREE.BufferAttribute(cubeGeometry.attributes.uv.array, 2));// 灯光// 环境光// 参数 1：光源颜色 2：光源强度const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white lightscene.add(light);//直线光源const directionalLight = new THREE.DirectionalLight(0xffffff, 1);directionalLight.position.set(10, 10, 10);scene.add(directionalLight);// 初始化渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染的尺寸大小renderer.setSize(window.innerWidth, window.innerHeight);// 将webgl渲染的canvas内容添加到bodydocument.body.appendChild(renderer.domElement);// 创建轨道控制器const controls = new OrbitControls(camera, renderer.domElement);// 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。controls.enableDamping = true;// 添加坐标轴辅助器const axesHelper = new THREE.AxesHelper(5);scene.add(axesHelper);function render() {controls.update();renderer.render(scene, camera);// 渲染下一帧的时候就会调用render函数requestAnimationFrame(render);}render();// 监听画面变化，更新渲染画面window.addEventListener("resize", () => {// console.log("画面变化了");// 更新摄像头camera.aspect = window.innerWidth / window.innerHeight;// 更新摄像机的投影矩阵camera.updateProjectionMatrix();// 更新渲染器renderer.setSize(window.innerWidth, window.innerHeight);// 设置渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio);});
