第二部分-光照与阴影——12. 反射与折射

12. 反射与折射1. 概述反射和折射是创建逼真材质如金属、玻璃、水面的关键技术。Three.js 通过环境贴图Environment Map和 MeshPhysicalMaterial 的透射属性来实现这些效果。┌─────────────────────────────────────────────────────────────┐ │ 反射与折射体系 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 环境贴图Environment Map │ │ ├── CubeTextureLoader立方体贴图 │ │ ├── CubeCamera实时环境贴图 │ │ └── Scene.background场景背景 │ │ │ │ 反射效果 │ │ ├── MeshStandardMaterial.envMap │ │ ├── MeshPhysicalMaterial.envMap │ │ └── 金属材质自然反射 │ │ │ │ 折射效果 │ │ ├── transmission透射率 │ │ ├── thickness厚度 │ │ ├── ior折射率 │ │ └── roughness粗糙度 │ │ │ └─────────────────────────────────────────────────────────────┘2. 环境贴图Environment Map2.1 CubeTextureLoader立方体贴图import*asTHREEfromthree;constcubeTextureLoadernewTHREE.CubeTextureLoader();// 加载6个面的纹理顺序右、左、上、下、前、后constenvMapcubeTextureLoader.load([px.jpg,// 右 (x正方向)nx.jpg,// 左 (x负方向)py.jpg,// 上 (y正方向)ny.jpg,// 下 (y负方向)pz.jpg,// 前 (z正方向)nz.jpg// 后 (z负方向)]);// 设置为场景背景scene.backgroundenvMap;// 设置为环境反射贴图scene.environmentenvMap;// 设置为材质的环境贴图constmaterialnewTHREE.MeshStandardMaterial({color:0xffffff,metalness:0.9,roughness:0.2,envMap:envMap});2.2 从 HDR 文件加载import{RGBELoader}fromthree/examples/jsm/loaders/RGBELoader.js;constrgbeLoadernewRGBELoader();rgbeLoader.load(environment.hdr,(texture){texture.mappingTHREE.EquirectangularMapping;scene.environmenttexture;scene.backgroundtexture;});2.3 从 JSON 文件加载import{EXRLoader}fromthree/examples/jsm/loaders/EXRLoader.js;constexrLoadernewEXRLoader();exrLoader.load(environment.exr,(texture){texture.mappingTHREE.EquirectangularMapping;scene.environmenttexture;});3. 实时反射CubeCameraCubeCamera 用于实时生成周围环境的环境贴图。3.1 CubeCamera 配置// 创建 CubeCameraconstcubeRenderTargetnewTHREE.WebGLCubeRenderTarget(256,{format:THREE.RGBAFormat,generateMipmaps:true,minFilter:THREE.LinearMipmapLinearFilter});constcubeCameranewTHREE.CubeCamera(0.1,1000,cubeRenderTarget);// 在需要反射的位置更新 CubeCameracubeCamera.update(renderer,scene);// 获取反射贴图constenvMapcubeRenderTarget.texture;3.2 实时反射示例constmirrorMaterialnewTHREE.MeshStandardMaterial({metalness:1,roughness:0.1,envMap:cubeRenderTarget.texture});constmirrorSpherenewTHREE.Mesh(sphereGeometry,mirrorMaterial);scene.add(mirrorSphere);functionanimate(){// 每帧更新 CubeCameramirrorSphere.visiblefalse;cubeCamera.update(renderer,scene);mirrorSphere.visibletrue;renderer.render(scene,camera);}4. 材质反射属性4.1 MeshStandardMaterial 反射// 金属材质高反射constmetalMaterialnewTHREE.MeshStandardMaterial({color:0xccaa88,metalness:0.95,roughness:0.2,envMap:envMap,envMapIntensity:1.0});// 抛光金属constpolishedMetalnewTHREE.MeshStandardMaterial({color:0xffffff,metalness:0.98,roughness:0.05,envMapIntensity:1.2});// 拉丝金属constbrushedMetalnewTHREE.MeshStandardMaterial({color:0xaaaaaa,metalness:0.9,roughness:0.4,envMapIntensity:0.8});4.2 MeshPhysicalMaterial 反射增强// 清漆层增强反射constglossyMaterialnewTHREE.MeshPhysicalMaterial({color:0x88aaff,metalness:0.8,roughness:0.2,clearcoat:1.0,clearcoatRoughness:0.1,envMapIntensity:1.0});// 丝绸质感constsilkMaterialnewTHREE.MeshPhysicalMaterial({color:0xcc8866,metalness:0.3,roughness:0.5,sheen:0.8,sheenColor:0xffaa88,envMapIntensity:0.6});5. 折射效果5.1 玻璃材质MeshPhysicalMaterial// 基础玻璃constglassMaterialnewTHREE.MeshPhysicalMaterial({color:0x88aaff,metalness:0.9,roughness:0.1,transparent:true,opacity:0.5,transmission:0.9,// 透射率thickness:0.5,// 厚度ior:1.5// 折射率});// 有色玻璃consttintedGlassnewTHREE.MeshPhysicalMaterial({color:0xff8866,metalness:0.9,roughness:0.05,transparent:true,opacity:0.7,transmission:0.8,thickness:0.3,ior:1.5});// 磨砂玻璃constfrostedGlassnewTHREE.MeshPhysicalMaterial({color:0xffffff,metalness:0,roughness:0.3,transparent:true,opacity:0.6,transmission:0.85,thickness:0.4,ior:1.5});5.2 折射率IOR参考材质IOR真空1.0空气1.0003冰1.31水1.33玻璃1.5蓝宝石1.77钻石2.426. 反射探针Reflection Probeimport{Reflector}fromthree/examples/jsm/objects/Reflector.js;// 地面反射constreflectornewReflector(planeGeometry,{clipBias:0.003,textureWidth:1024,textureHeight:1024,color:0x8899aa});reflector.position.y-0.5;reflector.rotateX(-Math.PI/2);scene.add(reflector);7. 完整示例import*asTHREEfromthree;import{OrbitControls}fromthree/examples/jsm/controls/OrbitControls.js;import{RGBELoader}fromthree/examples/jsm/loaders/RGBELoader.js;constscenenewTHREE.Scene();scene.backgroundnewTHREE.Color(0x111122);constcameranewTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);camera.position.set(5,4,8);camera.lookAt(0,0,0);constrenderernewTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);renderer.shadowMap.enabledtrue;renderer.toneMappingTHREE.ACESFilmicToneMapping;renderer.toneMappingExposure1.2;document.body.appendChild(renderer.domElement);constcontrolsnewOrbitControls(camera,renderer.domElement);controls.enableDampingtrue;// 加载环境贴图constcubeTextureLoadernewTHREE.CubeTextureLoader();// 使用在线资源或本地资源// const envMap cubeTextureLoader.load([// px.jpg, nx.jpg, py.jpg, ny.jpg, pz.jpg, nz.jpg// ]);// scene.environment envMap;// 辅助对象constaxesHelpernewTHREE.AxesHelper(5);scene.add(axesHelper);constgridHelpernewTHREE.GridHelper(15,20);scene.add(gridHelper);// 光源constambientLightnewTHREE.AmbientLight(0x404040,0.4);scene.add(ambientLight);constdirectionalLightnewTHREE.DirectionalLight(0xffffff,1);directionalLight.position.set(5,10,7);directionalLight.castShadowtrue;scene.add(directionalLight);// 金属球constsphereGeometrynewTHREE.SphereGeometry(0.8,128,128);// 金属材质constmetalMaterialnewTHREE.MeshStandardMaterial({color:0xccaa88,metalness:0.95,roughness:0.2});constmetalSpherenewTHREE.Mesh(sphereGeometry,metalMaterial);metalSphere.position.set(-2,0.8,0);metalSphere.castShadowtrue;scene.add(metalSphere);// 玻璃球constglassMaterialnewTHREE.MeshPhysicalMaterial({color:0x88aaff,metalness:0.9,roughness:0.1,transparent:true,opacity:0.6,transmission:0.9,thickness:0.5,ior:1.5});constglassSpherenewTHREE.Mesh(sphereGeometry,glassMaterial);glassSphere.position.set(2,0.8,0);glassSphere.castShadowtrue;scene.add(glassSphere);// 立方体constboxGeometrynewTHREE.BoxGeometry(1,1,1);// 抛光金属立方体constpolishedMaterialnewTHREE.MeshStandardMaterial({color:0xffffff,metalness:0.98,roughness:0.05});constpolishedCubenewTHREE.Mesh(boxGeometry,polishedMaterial);polishedCube.position.set(-2,0.5,2);polishedCube.castShadowtrue;scene.add(polishedCube);// 彩色玻璃立方体constcoloredGlassnewTHREE.MeshPhysicalMaterial({color:0xff8866,metalness:0.9,roughness:0.05,transparent:true,opacity:0.7,transmission:0.85,thickness:0.4,ior:1.5});constglassCubenewTHREE.Mesh(boxGeometry,coloredGlass);glassCube.position.set(2,0.5,2);glassCube.castShadowtrue;scene.add(glassCube);// 平面地面constplaneGeometrynewTHREE.PlaneGeometry(12,12);constplaneMaterialnewTHREE.MeshStandardMaterial({color:0x336699,side:THREE.DoubleSide});constplanenewTHREE.Mesh(planeGeometry,planeMaterial);plane.rotation.x-Math.PI/2;plane.position.y-0.5;plane.receiveShadowtrue;scene.add(plane);// GUI 控制importGUIfromlil-gui;constguinewGUI();// 金属球控制constmetalFoldergui.addFolder(金属球);metalFolder.add(metalMaterial,metalness,0,1).name(金属度);metalFolder.add(metalMaterial,roughness,0,1).name(粗糙度);metalFolder.add(metalMaterial,envMapIntensity,0,2).name(环境强度);metalFolder.open();// 玻璃球控制constglassFoldergui.addFolder(玻璃球);glassFolder.add(glassMaterial,metalness,0,1).name(金属度);glassFolder.add(glassMaterial,roughness,0,1).name(粗糙度);glassFolder.add(glassMaterial,transparency,0,1).name(透明度).onChange(val{glassMaterial.transparentval0;glassMaterial.opacityval;});glassFolder.add(glassMaterial,transmission,0,1).name(透射率);glassFolder.add(glassMaterial,thickness,0,1).name(厚度);glassFolder.add(glassMaterial,ior,1,2.5).name(折射率);glassFolder.open();// 动画functionanimate(){requestAnimationFrame(animate);// 旋转物体metalSphere.rotation.y0.005;glassSphere.rotation.y0.005;polishedCube.rotation.x0.01;polishedCube.rotation.y0.01;glassCube.rotation.x0.01;glassCube.rotation.y0.01;controls.update();renderer.render(scene,camera);}animate();window.addEventListener(resize,onWindowResize,false);functiononWindowResize(){camera.aspectwindow.innerWidth/window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth,window.innerHeight);}8. 总结技术类/方法用途环境贴图CubeTextureLoader加载预制的环境贴图HDR 环境RGBELoader加载 HDR 格式环境贴图实时反射CubeCamera动态生成环境贴图金属反射metalness控制金属反射强度玻璃折射transmission控制透射率厚度thickness影响折射强度折射率ior影响光线弯曲程度材质属性说明适用材质metalness金属度 (0-1)Standard, Physicalroughness粗糙度 (0-1)Standard, PhysicalenvMap环境贴图Standard, PhysicalenvMapIntensity环境强度Standard, Physicaltransparent透明开关所有opacity透明度所有transmission透射率Physicalthickness厚度Physicalior折射率Physicalclearcoat清漆层Physical