three.js 第六节 - 纹理以及贴图【.hdr文件（hdr贴图）】- 色彩空间

素材

这是素材
在这里插入图片描述
更多素材、案例、项目好几个G一共，加我q178373168，60大洋拿走

源码

源码


// @ts-nocheck
// 引入three.js
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 导入lil.gui
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
// 导入hdr加载器（专门加载hdr的）
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'//#region 
const scence = new THREE.Scene()const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
// 设置相机位置
camera.position.set(0, 0, 2)
// camera.position.z = 5
// camera.position.y = 2
// camera.position.x = 2
// camera.lookAt(0, 0, 0)const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth / 2, window.innerHeight / 2)
document.body.appendChild(renderer.domElement)
//#endregion// -----------------------------------------------------------------
// -----------------------------------------------------------------import imgMap from '/public/assets/texture/watercover/CityNewYork002_COL_VAR1_1K.png'import imgAoMap from '/public/assets/texture/watercover/CityNewYork002_AO_1K.jpg'import imgAlphaMap from '/public/assets/texture/door/height.jpg'import imgLightMap from '/public/assets/texture/colors.png'import imgSpecularMap from '../public/assets/texture/watercover/CityNewYork002_GLOSS_1K.jpg'`【创建纹理加载器】`const textureLoader = new THREE.TextureLoader()// 加载纹理let texture = textureLoader.load(imgMap)texture.colorSpace = THREE.SRGBColorSpace `纹理的色彩空间，设置为sgb模式的（让纹理看起会更加真实）`// texture.colorSpace = THREE.LinearSRGBColorSpace // 纹理的色彩空间，默认是线性模式的（看起来会比较白，不真实）// texture.colorSpace = THREE.NoColorSpace // 不设置纹理的色彩空间，默认也是线性模式的// 加载ao贴图let aoMap = textureLoader.load(imgAoMap)// 透明度贴图let alphaMap = textureLoader.load(imgAlphaMap)// 光照贴图let lightMap = textureLoader.load(imgLightMap)// 高光贴图let specularMap = textureLoader.load(imgSpecularMap)`【rgbeLoader加载hdr贴图】`let rgbeLoader = new RGBELoader()rgbeLoader.load('/public/assets/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr', (envMap) => {`设置球形贴图，否则环境贴图就像一个背景图片似的`envMap.mapping = THREE.EquirectangularReflectionMapping`设置环境贴图`scence.background = envMap// 设置plane的环境贴图（planeMaterial是plane的材质）planeMaterial.envMap = envMap})// 创建一个平面let planeGeometry = new THREE.PlaneGeometry(1, 1) // 宽，高let planeMaterial = new THREE.MeshBasicMaterial({color: 0xffffff,map: texture,transparent: true, // 设置是否透明aoMap: aoMap, // ao贴图（其实就是加上阴影了，ao强度就是控制阴影强度的）aoMapIntensity: 1, // ao强度（不写的话，默认是1）// alphaMap: alphaMap, // 透明度贴图// lightMap: lightMap, // 设置光照贴图（环境贴图之后）specularMap: specularMap, // 高光贴图reflectivity: 1, // 反射强度（值设置的小，贴图上反射的光就不那么强烈了）})// planeMaterial.map = texturelet plane = new THREE.Mesh(planeGeometry, planeMaterial)scence.add(plane)// 创建GUIconst gui = new GUI()gui.add(planeMaterial, 'aoMapIntensity').min(0).max(1).name('ao强度')gui.add(texture, 'colorSpace', {sRGB: THREE.SRGBColorSpace,linear: THREE.LinearSRGBColorSpace}).onChange(() => {// 当切换纹理的色彩空间时候，需要触发这个更新，不然没有效果texture.needsUpdate = true})// -----------------------------------------------------------------
// -----------------------------------------------------------------//#region 
// 添加世界坐标辅助器，红色-X轴； 绿色-Y轴； 蓝色-Z轴
const axesHelper = new THREE.AxesHelper(5)
scence.add(axesHelper)const controls = new OrbitControls(camera, renderer.domElement)
// 设置带阻尼的惯性
controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05// 每一帧根据控制器更新画面
function render() {// 如果，需要控制器带有阻尼效果，或者自动旋转等效果，就需要加入`controls.update()`controls.update()// `requestAnimationFrame`：在屏幕渲染下一帧画面时，触发回调函数来执行画面的渲染requestAnimationFrame(render)renderer.render(scence, camera)
}
render()
//#endregion