|
一、加载管理器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);
});
|