使用 THREE.CubeTextureLoader() 添加环境纹理，以创建立方体贴图

不使用 THREE.CubeTextureLoader() 的时候

源码

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(100, window.innerHeight / window.innerHeight, 1, 50)
camera.position.set(0, 0, 10)
scene.add(camera)

const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

// --------------------------------------------------------------------

// const ambientLight = new THREE.AmbientLight(0xffffff, 0.5) // 环境光
// scene.add(ambientLight)
// const pointLight = new THREE.PointLight(0xffffff, 0.5) // 点光源
// pointLight.position.set(2, 3, 4)
// scene.add(pointLight)

const directionLight = new THREE.DirectionalLight('#ffffff', 1) // 平行光
directionLight.castShadow = true // 把自己的阴影投射到别的物体上
directionLight.position.set(0, 0, 200)
scene.add(directionLight)

/*
  THREE.CubeTextureLoader()
    添加环境纹理，
    这个方法，接收一个包含六个图像URL的数组作为参数，并自动加载这些图像，以创建立方体贴图
*/
const cubeTextureLoader = new THREE.CubeTextureLoader()
const envMapTexture = cubeTextureLoader.load([
	'../public/textures/environmentMaps/0/px.jpg',
	'../public/textures/environmentMaps/0/nx.jpg',
	'../public/textures/environmentMaps/0/py.jpg',
	'../public/textures/environmentMaps/0/ny.jpg',
	'../public/textures/environmentMaps/0/pz.jpg',
	'../public/textures/environmentMaps/0/nz.jpg'
])
scene.environment = envMapTexture
scene.background = envMapTexture

// --------------------------------------------------------------------

const depthMaterial = new THREE.MeshDepthMaterial({
	depthPacking: THREE.RGBADepthPacking
})

const textureLoader = new THREE.TextureLoader()
// 加载模型纹理
const modelTexture = textureLoader.load('../public/assets/model/LeePerrySmith/color.jpg')
// 加载模型的法向纹理
const normalTexture = textureLoader.load('../public/assets/model/LeePerrySmith/normal.jpg')
const material = new THREE.MeshStandardMaterial({
	map: modelTexture,
	normalMap: normalTexture
})

// 模型加载
const gltfLoader = new GLTFLoader()
gltfLoader.load('../public/assets/model/LeePerrySmith/LeePerrySmith.glb', gltf => {
	// console.log('gltf=', gltf)
	const mesh = gltf.scene.children[0]
	// console.log('mesh=', mesh)
	// @ts-ignore
	mesh.material = material
	mesh.castShadow = true // 把自己的阴影投射到别的物体上
	
	// 设定自定义的深度材质
	mesh.customDepthMaterial = depthMaterial
	
	scene.add(mesh)
})

// 一个平面
const plane = new THREE.Mesh(
	new THREE.PlaneGeometry(10, 10),
	new THREE.MeshStandardMaterial({
		side: THREE.DoubleSide
	})
)
plane.position.set(0, 0, -6)
plane.receiveShadow = true // 接收，来自其他光源投射的阴影
scene.add(plane)

// --------------------------------------------------------------------

//#region
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.shadowMap.enabled = true // 允许渲染器投射阴影
document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

const clock = new THREE.Clock()
function animate() {
	controls.update()
	const time = clock.getElapsedTime()
	// customUniforms.uTime.value = time
	
	requestAnimationFrame(animate)
	renderer.render(scene, camera)
}
animate()

window.addEventListener('resize', () => {
	camera.aspect = window.innerWidth / window.innerHeight
	camera.updateProjectionMatrix()
	renderer.setSize(window.innerWidth, window.innerHeight)
	renderer.setPixelRatio(window.devicePixelRatio)
})
//#endregion