使用 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-ignoremesh.material = materialmesh.castShadow = true // 把自己的阴影投射到别的物体上// 设定自定义的深度材质mesh.customDepthMaterial = depthMaterialscene.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 = trueconst clock = new THREE.Clock()
function animate() {controls.update()const time = clock.getElapsedTime()// customUniforms.uTime.value = timerequestAnimationFrame(animate)renderer.render(scene, camera)
}
animate()window.addEventListener('resize', () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth, window.innerHeight)renderer.setPixelRatio(window.devicePixelRatio)
})
//#endregion