CubeTextureLoader.load()

CubeTextureLoader.load() 是three.js中用于加载立方体纹理贴图的方法。

参数

CubeTextureLoader.load(url: string, onLoad?: (texture: CubeTexture) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void)

url：包含立方体纹理贴图的路径。

onLoad：立方体纹理贴图加载成功后调用的回调函数。该函数接收一个 CubeTexture 对象作为参数。

onProgress：立方体纹理贴图正在加载时调用的回调函数。该函数接收一个 ProgressEvent 对象作为参数。

onError：立方体纹理贴图加载失败时调用的回调函数。该函数接收一个 ErrorEvent 对象作为参数。

用法

const textureLoader = new THREE.CubeTextureLoader();
const texture = textureLoader.load([
  'posx.jpg', 'negx.jpg',
  'posy.jpg', 'negy.jpg',
  'posz.jpg', 'negz.jpg'
]);

示例

加载并应用立方体纹理贴图：

const scene = new THREE.Scene();

// 创建容器，存放立方体
const container = new THREE.Object3D();
scene.add(container);

// 创建立方体
const geometry = new THREE.BoxGeometry(10, 10, 10);
const material = new THREE.MeshBasicMaterial({
  envMap: new THREE.CubeTextureLoader().load([
    'posx.jpg', 'negx.jpg',
    'posy.jpg', 'negy.jpg',
    'posz.jpg', 'negz.jpg'
  ])
});
const cube = new THREE.Mesh(geometry, material);
container.add(cube);

// 创建环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

// 创建点光源
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(100, 100, 0);
scene.add(pointLight);

// 利用渲染器渲染场景
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const animate = () => {
  requestAnimationFrame(animate);
  container.rotation.x += 0.01;
  container.rotation.y += 0.01;
  renderer.render(scene, camera);
};
animate();

参考

CubeTextureLoader - three.js docs