目录
1. LoadingManager
其功能是处理并跟踪已加载和待处理的数据。如果未手动设置加强管理器,则会为加载器创建和使用默认全局实例加载器管理器 - 请参阅 DefaultLoadingManager.
一般来说,默认的加载管理器已足够使用了,但有时候也需要设置单独的加载器 - 例如,如果你想为对象和纹理显示单独的加载条。
1.1代码示例
下面的例子将介绍,如何使用加载管理器来跟踪 OBJLoader 的加载进度流程。
const manager = new THREE.LoadingManager();
manager.onStart = function ( url, itemsLoaded, itemsTotal ) {
console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
};
manager.onLoad = function ( ) {
console.log( 'Loading complete!');
};
manager.onProgress = function ( url, itemsLoaded, itemsTotal ) {
console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
};
manager.onError = function ( url ) {
console.log( 'There was an error loading ' + url );
};
const loader = new THREE.OBJLoader( manager );
loader.load( 'file.obj', function ( object ) {
//
} );
除了观察进度流程之外,还可以使用LoadingManager在加载期间覆写资源URL。当某资源来自拖拽事件、 WebSockets、WebRTC或其他API时,此方法可以有所帮助。下面显示了如何使用Blob URL加载内存模型的示例。
// 将文件拖入网页时创建的Blob或File对象。
const blobs = {'fish.gltf': blob1, 'diffuse.png': blob2, 'normal.png': blob3};
const manager = new THREE.LoadingManager();
// 使用URL回调初始化加载管理器。
const objectURLs = [];
manager.setURLModifier( ( url ) => {
url = URL.createObjectURL( blobs[ url ] );
objectURLs.push( url );
return url;
} );
// 像通常一样加载,然后撤消blob URL
const loader = new THREE.GLTFLoader( manager );
loader.load( 'fish.gltf', (gltf) => {
scene.add( gltf.scene );
objectURLs.forEach( ( url ) => URL.revokeObjectURL( url ) );
});
1.2构造方法
LoadingManager( onLoad : Function, onProgress : Function, onError : Function )
onLoad — (可选) 所有加载器加载完成后,将调用此函数。
onProgress — (可选) 当每个项目完成后,将调用此函数。
onError — (可选) 当一个加载器遇到错误时,将调用此函数。
创建一个新的 LoadingManager.
1.3 属性
1).onStart : Function
此函数在加载开始时被调用。 有如下参数:
url — 被加载的项的url。
itemsLoaded — 目前已加载项的个数。
itemsTotal — 总共所需要加载项的个数。
该函数默认为undefined。
2).onLoad : Function
所有的项目加载完成后将调用此函数。默认情况下,该函数是未定义的,除非在构造函数中传入。
3).onProgress : Function
此方法加载每一个项,加载完成时进行调用。 有如下参数:
url — 被加载的项的url。
itemsLoaded — 目前已加载项的个数。
itemsTotal — 总共所需要加载项的个数。
默认情况下,该函数为undefined,除非在构造函数中传入。
4).onError : Function
此方法将在任意项加载错误时,进行调用。 有如下参数:
url — 加载发生错误的项目的url
默认情况下,该函数为undefined,除非在构造函数中传入。
1.4 方法
2. 设置材质纹理加载进度(TextureLoader)
2.1 TextureLoader
加载texture的一个类。 内部使用ImageLoader来加载文件。
// 初始化一个加载器
const loader = new THREE.TextureLoader();
// 加载一个资源
loader.load(
// 资源URL
'textures/land_ocean_ice_cloud_2048.jpg',
// onLoad回调
function ( texture ) {
// in this example we create the material when the texture is loaded
const material = new THREE.MeshBasicMaterial( {
map: texture
} );
},
// 目前暂不支持onProgress的回调
undefined,
// onError回调
function ( err ) {
console.error( 'An error happened.' );
}
);
请注意three.js r84遗弃了TextureLoader进度事件。对于支持进度事件的TextureLoader , 请参考this thread。
2.2 构造函数
TextureLoader( manager : LoadingManager )
manager — 加载器使用的loadingManager,默认值为THREE.DefaultLoadingManager.
基于上篇材质内容加载,使用LoadingManager设置材质加载进度显示。
2.3 方法
共有方法请参见其基类Loader。
.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : Texture
url — 文件的URL或者路径,也可以为 Data URI.
onLoad — 加载完成时将调用。回调参数为将要加载的texture.
onProgress — 将在加载过程中进行调用。参数为XMLHttpRequest实例,实例包含total和loaded字节。
onError — 在加载错误时被调用。
从给定的URL开始加载并将完全加载的texture传递给onLoad。该方法还返回一个新的纹理对象,该纹理对象可以直接用于材质创建。 如果采用此方法,一旦相应的加载过程完成,纹理可能会在场景中出现。
2.4 加载材质进度示例
基于上一篇文章,设置材质加载函数,实现多个材质加载进度及状态的显示。
import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 目标:纹理的进度
// 1、创建场景
const scene = new THREE.Scene();
// 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 = "200px";
div.style.height = "200px";
div.style.position = "fixed";
div.style.right = 0;
div.style.top = 0;
div.style.color = "#fff";
document.body.appendChild(div);
let event = {};
// 单张纹理图的加载
event.onLoad = function () {
console.log("图片加载完成");
};
event.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;
};
event.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"
// event.onLoad,
// event.onProgress,
// event.onError
);
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 material = new THREE.MeshStandardMaterial({
color: "#ffff00",
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,
});
material.side = THREE.DoubleSide;
const cube = new THREE.Mesh(cubeGeometry, material);
scene.add(cube);
// 给cube添加第二组uv
cubeGeometry.setAttribute(
"uv2",
new THREE.BufferAttribute(cubeGeometry.attributes.uv.array, 2)
);
// 添加平面
const planeGeometry = new THREE.PlaneBufferGeometry(1, 1, 200, 200);
const plane = new THREE.Mesh(planeGeometry, material);
plane.position.set(1.5, 0, 0);
scene.add(plane);
// console.log(plane);
// 给平面设置第二组uv
planeGeometry.setAttribute(
"uv2",
new THREE.BufferAttribute(planeGeometry.attributes.uv.array, 2)
);
// 灯光
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
scene.add(light);
//直线光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);
// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);
// // 使用渲染器,通过相机将场景渲染进来
// renderer.render(scene, camera);
// 创建轨道控制器
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);
});
实现效果: