three.js加载管理器LoadingManager实现对纹理图片的加载监听

一、加载管理器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: "", // 图片的url
  onLoad: 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: "", // 图片的url
  onLoad: 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添加第二组uv
cubeGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(cubeGeometry.attributes.uv.array, 2)
);

// 灯光
// 环境光
// 参数 1：光源颜色 2：光源强度
const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
scene.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内容添加到body
document.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);
});