在 Three.js 中,我们可以使用 LoadingManager
和 TextureLoader
、GLTFLoader
、OBJLoader
等来预加载文件。下面我们将针对 TextureLoader
和 GLTFLoader
进行详细解释。
预加载纹理
使用 Three.js 中的 TextureLoader
,我们可以预加载纹理。以下是一个示例代码:
// 创建 LoadingManager
const loadingManager = new THREE.LoadingManager();
loadingManager.onStart = function ( url, itemsLoaded, itemsTotal ) {
console.log( 'Started loading file: ' + url );
};
loadingManager.onLoad = function ( ) {
console.log( 'Loading complete!' );
};
loadingManager.onProgress = function ( url, itemsLoaded, itemsTotal ) {
console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
};
loadingManager.onError = function ( url ) {
console.log( 'There was an error loading ' + url );
};
// 创建 TextureLoader
const textureLoader = new THREE.TextureLoader( loadingManager );
// 预加载纹理
const texture1 = textureLoader.load( 'texture1.jpg' );
const texture2 = textureLoader.load( 'texture2.jpg' );
// 将纹理用于材质
const material1 = new THREE.MeshBasicMaterial( { map: texture1 } );
const material2 = new THREE.MeshBasicMaterial( { map: texture2 } );
// 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const mesh = new THREE.Mesh( geometry, [ material1, material2, material1, material2, material1, material2 ] );
// 将立方体添加到场景
scene.add( mesh );
在上述示例中,我们首先创建了一个 LoadingManager
,并设置其各个回调函数。然后创建了一个 TextureLoader
,并通过其 load
方法预加载了两个纹理文件。最后,在创建的 Mesh
中使用了这两个纹理。
预加载模型
在 Three.js 中,使用 GLTFLoader
预加载模型文件与预加载纹理文件类似。以下是一个示例代码:
// 创建 LoadingManager
const loadingManager = new THREE.LoadingManager();
loadingManager.onStart = function ( url, itemsLoaded, itemsTotal ) {
console.log( 'Started loading file: ' + url );
};
loadingManager.onLoad = function ( ) {
console.log( 'Loading complete!' );
};
loadingManager.onProgress = function ( url, itemsLoaded, itemsTotal ) {
console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
};
loadingManager.onError = function ( url ) {
console.log( 'There was an error loading ' + url );
};
// 创建 GLTFLoader
const gltfLoader = new THREE.GLTFLoader( loadingManager );
// 预加载模型
gltfLoader.load( 'model.glb', function ( gltf ) {
// 给加载的模型设置位置和旋转
gltf.scene.position.set( 0, 0, 0 );
gltf.scene.rotation.set( 0, 0, 0 );
// 将模型添加到场景
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );
在上述示例中,我们创建了一个 LoadingManager
,并设置其各个回调函数。然后创建了一个 GLTFLoader
,并通过其 load
方法预加载了一个模型文件。在加载成功回调中,将模型添加到了场景中。如果加载过程中出现错误,可以使用第三个回调函数获取错误信息。