three.js使用环境贴图或者加载hdr图

1、three.js使用环境贴图

1.1、效果视频

环境贴图

1.2、使用步骤（个人认为）

（1）导入引入相关方法
（2）创建场景
（3）创建相机
（4）添加物体材质
（5）添加光源
（6）渲染

1.3、代码

// 环境贴图代码
import * as THREE from 'three'//目标：使用环境贴图放在球上展示//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'//1、创建场景
const scene = new THREE.Scene()//2、创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
) // 参数分别代表，相机角度、屏幕宽高比、近端点，远端点//设置相机位置
camera.position.set(2, 2, 2)
scene.add(camera)//导入纹理
const cubeTextureLoader = new THREE.CubeTextureLoader()
//一下代码是因为物体有上下左右前后六个面，所以设置6个方向的贴图
const envMapTexture = cubeTextureLoader.load(['/static/texture/environmentMaps/1/px.jpg','/static/texture/environmentMaps/1/nx.jpg','/static/texture/environmentMaps/1/py.jpg','/static/texture/environmentMaps/1/ny.jpg','/static/texture/environmentMaps/1/pz.jpg','/static/texture/environmentMaps/1/nz.jpg',
])
//添加物体
const sphereGeometry = new THREE.SphereGeometry(1, 20, 20)
const material = new THREE.MeshStandardMaterial({metalness: 0.7, //金属度roughness: 0.1, //粗糙度，设置为0表面会非常光滑，可以折射出太阳光// envMap: envMapTexture, //环境贴图
})
const mesh = new THREE.Mesh(sphereGeometry, material)
scene.add(mesh)//给场景添加背景
scene.background = envMapTexture
//给场景中所有的物体添加默认的贴图
scene.environment = envMapTexture//添加环境光
const light = new THREE.AmbientLight(0xffffff, 0.5)
scene.add(light)//添加直线光源
const directionLight = new THREE.DirectionalLight(0xffffff, 1)
directionLight.position.set(10, 10, 10)
scene.add(directionLight)//初始化渲染器
const renderer = new THREE.WebGLRenderer()//设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)//将webGL渲染的canvas添加到app中
document.getElementById('app').appendChild(renderer.domElement)//创建控制器
const controls = new OrbitControls(camera, renderer.domElement)//设置控制器阻尼，让滑动更有真实感
controls.enableDamping = true//创建坐标轴
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)render()//渲染函数
function render(time) {controls.update()renderer.render(scene, camera)//下一帧渲染完毕再次执行，保证每一帧都渲染requestAnimationFrame(render)
}

2、three.js加载hdr图

2.1、效果视频

加载hdr图

2.2、代码

// three.js加载hdr图
import * as THREE from 'three'//目标：加载hdr图//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'//导入hdr加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'//1、创建场景
const scene = new THREE.Scene()//2、创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
) // 参数分别代表，相机角度、屏幕宽高比、近端点，远端点//设置相机位置
camera.position.set(2, 2, 2)
scene.add(camera)const rgbeLoader = new RGBELoader()
rgbeLoader.loadAsync('static/texture/hdr/003.hdr').then((texture) => {texture.mapping = THREE.EquirectangularReflectionMapping //正常只是一张图平铺，设置这个可以让图包围环绕整个环境scene.background = texture //设置环境贴图scene.environment = texture
})//添加物体
const sphereGeometry = new THREE.SphereGeometry(1, 20, 20)
const material = new THREE.MeshStandardMaterial({metalness: 0.7, //金属度roughness: 0.1, //粗糙度，设置为0表面会非常光滑，可以折射出太阳光
})
const mesh = new THREE.Mesh(sphereGeometry, material)
scene.add(mesh)//添加环境光
const light = new THREE.AmbientLight(0xffffff, 0.5)
scene.add(light)//添加直线光源
const directionLight = new THREE.DirectionalLight(0xffffff, 1)
directionLight.position.set(10, 10, 10)
scene.add(directionLight)//初始化渲染器
const renderer = new THREE.WebGLRenderer()//设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)//将webGL渲染的canvas添加到app中
document.getElementById('app').appendChild(renderer.domElement)//创建控制器
const controls = new OrbitControls(camera, renderer.domElement)//设置控制器阻尼，让滑动更有真实感
controls.enableDamping = true//创建坐标轴
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)render()//渲染函数
function render(time) {controls.update()renderer.render(scene, camera)//下一帧渲染完毕再次执行，保证每一帧都渲染requestAnimationFrame(render)
}