https://www.bilibili.com/video/BV1hD4y1h7pi?t=1.8
【使用 Three.js 实现的效果】
一、设置纹理加载进度
1、加载单张纹理
设置 onLoad()，onProgress()，onError()，并在纹理加载器中添加进来
...... let event = {} // 单张纹理图的加载 event.onLoad = function() { console.log('图片加载完成') } // 加载进度 event.onProgress = function(e) { console.log('图片加载进度', e) } // 加载错误 event.onError = function(e) { console.log('图片加载出错', e) } ...... // 纹理加载器 添加纹理图片 const doorColorTexture = textureLoader.load('./textures/color.jpg', event.onLoad, event.onProgress, event.onError)
2、加载多张纹理
LoadingManager()：处理并跟踪已加载和待处理的数据。如果未手动设置加强管理器，则会为加载器创建和使用默认全局实例加载器管理器。
设置纹理加载器，把纹理加载器作为 new THREE.TextureLoader() 的参数
// 设置 div 用来显示进度 let div = document.createElement("div") div.style.width = "200px" div.style.height = "200px" div.style.position = "fixed" div.style.right = "0" div.style.top = "0" div.style.color = "#fff" document.body.appendChild(div) // 纹理图的加载 event.onLoad = function(e) { console.log('图片加载完成') } // 加载进度 event.onProgress = function(url, num, total) { console.log('图片加载完成', url) console.log('图片加载进度', (num / total * 100).toFixed(2) + '%') console.log('图片总数', total) let value = (num / total * 100).toFixed(2) + '%' div.innerHTML = value } // 加载错误 event.onError = function(e) { console.log('图片加载出错', e) } // 设置加载管理器 const loadingManager = new THREE.LoadingManager( event.onLoad, event.onProgress, event.onError ) // 导入纹理（参数为加载管理器，可以为所有的纹理加载） const textureLoader = new THREE.TextureLoader(loadingManager)
二、环境贴图
环境贴图 (Environment Mapping) 又叫反射贴图 (Reflection Mapping)
在曲面上对反射效果进行很好的的近似。
下面我们来进行环境贴图，把图片贴到球体上，注意：px：x轴正向，nx：x轴负向，以此类推…
// 设置 cube 纹理加载器 const cubeTextureLoader = new THREE.CubeTextureLoader() // 导入环境图（px：x轴正向，nx：x轴负向...） const envMapTexture = cubeTextureLoader.load([ 'textures/environmentMaps/1/px.jpg', 'textures/environmentMaps/1/nx.jpg', 'textures/environmentMaps/1/py.jpg', 'textures/environmentMaps/1/ny.jpg', 'textures/environmentMaps/1/pz.jpg', 'textures/environmentMaps/1/nz.jpg', ]) // 创建一个球 const sphereGeometry = new THREE.SphereBufferGeometry(1, 20, 20) // 设置材质 const material = new THREE.MeshStandardMaterial({ // 金属度 metalness: 0.9, // 粗糙度 roughness: 0.1, // 设置环境贴图 envMap: envMapTexture }) // 结合实体和材质 const sphere = new THREE.Mesh(sphereGeometry, material) // 添加到场景中 scene.add(sphere) // 环境光：均匀的照亮场景中的所有物体 const light = new THREE.AmbientLight(0xffffff, 0.9) scene.add(light) // 平行光：方向从一个平行光位置 position 到 target 位置 const directionLight = new THREE.DirectionalLight(0xffffff, 0.95) // 设置光的位置 directionLight.position.set(10, 10, 10) scene.add(directionLight)
不同角度的效果不一样，详细如下所示：
渲染周围的环境，把 xyz 正负轴的图片显示出来
// 给场景添加背景 scene.background = envMapTexture // 给场景所有的物体添加默认的环境贴图 scene.environment = envMapTexture
不同角度的成像效果如下：
三、经纬线映射贴图与HDR
高动态范围成像（英语：High Dynamic Range Imaging，简称HDRI或HDR），在计算机图形学与电影摄影术中，是用来实现比普通数位图像技术更大曝光动态范围（即更大的明暗差别）的一组技术。高动态范围成像的目的就是要正确地表示真实世界中从太阳光直射到最暗的阴影这样大的范围亮度。
DataTextureLoader 用于加载二进制文件格式的（rgbe，hdr，…）抽象类。内部使用 FileLoader 来加载文件，和创建一个新的 DataTexture
mapping 图像将如何应用到物体（对象）上。
下面我们来加载 HDR 环境图（类似于一张全景图，但并不一定是全景图）
// 导入 RGBE 加载器 import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader' // 创建加载器实例 const rgbeLoader = new RGBELoader() // 异步加载 rgbeLoader.loadAsync("textures/hdr/002.hdr").then((texture) => { // 等距圆柱投影的环境贴图，也被叫做经纬线映射贴图 texture.mapping = THREE.EquirectangularReflectionMapping // 设置背景图 scene.background = texture // 设置默认环境 scene.environment = texture }) ......
不同角度的成像效果如下：
