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

使用 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

原文地址：https://blog.csdn.net/pig_ning/article/details/142329070

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！