15. 纹理类型
1. 概述
纹理类型决定了贴图在材质中的作用。不同类型的贴图控制材质的不同视觉属性，如颜色、凹凸、粗糙度等。
┌─────────────────────────────────────────────────────────────┐ │ 纹理类型体系 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 基础贴图 │ │ ├── map：颜色贴图（漫反射） │ │ ├── alphaMap：透明度贴图 │ │ └── lightMap：光照贴图 │ │ │ │ 表面细节 │ │ ├── normalMap：法线贴图 │ │ ├── bumpMap：凹凸贴图 │ │ ├── displacementMap：置换贴图 │ │ └── roughnessMap：粗糙度贴图 │ │ │ │ 材质属性 │ │ ├── metalnessMap：金属度贴图 │ │ ├── aoMap：环境遮蔽贴图 │ │ ├── emissiveMap：自发光贴图 │ │ └── specularMap：高光贴图 │ │ │ └─────────────────────────────────────────────────────────────┘2. 颜色贴图（map）
颜色贴图是最基本的贴图类型，定义物体的基础颜色。
consttextureLoader=newTHREE.TextureLoader();constcolorMap=textureLoader.load('color.jpg');constmaterial=newTHREE.MeshStandardMaterial({map:colorMap});3. 透明度贴图（alphaMap）
alphaMap 控制材质的透明度，白色区域不透明，黑色区域透明。
constcolorMap=textureLoader.load('color.jpg');constalphaMap=textureLoader.load('alpha.png');// 黑白图constmaterial=newTHREE.MeshStandardMaterial({map:colorMap,alphaMap:alphaMap,transparent:true});4. 法线贴图（normalMap）
法线贴图通过修改表面法线来增加细节，不改变几何体形状。
constcolorMap=textureLoader.load('color.jpg');constnormalMap=textureLoader.load('normal.jpg');constmaterial=newTHREE.MeshStandardMaterial({map:colorMap,normalMap:normalMap,normalScale:newTHREE.Vector2(1,1)// 法线强度});4.1 法线贴图属性
| 属性 | 说明 | 默认值 |
|---|---|---|
normalMap | 法线贴图纹理 | null |
normalScale | 法线强度 (x, y) | (1, 1) |
normalMapType | 法线贴图类型 | THREE.TangentSpaceNormalMap |
5. 凹凸贴图（bumpMap）
凹凸贴图是法线贴图的简单替代，使用灰度图表示高度。
constbumpMap=textureLoader.load('bump.jpg');constmaterial=newTHREE.MeshStandardMaterial({map:colorMap,bumpMap:bumpMap,bumpScale:0.5// 凹凸强度});6. 置换贴图（displacementMap）
置换贴图实际移动顶点位置，改变几何体形状。
constdisplacementMap=textureLoader.load('displacement.jpg');constgeometry=newTHREE.PlaneGeometry(5,5,128,128);constmaterial=newTHREE.MeshStandardMaterial({map:colorMap,displacementMap:displacementMap,displacementScale:0.5,// 置换强度displacementBias:-0.2// 置换偏移});7. 粗糙度贴图（roughnessMap）
粗糙度贴图控制表面的光滑程度，白色粗糙，黑色光滑。
constroughnessMap=textureLoader.load('roughness.jpg');constmaterial=newTHREE.MeshStandardMaterial({map:colorMap,roughnessMap:roughnessMap,roughness:0.5// 基础粗糙度（与贴图混合）});8. 金属度贴图（metalnessMap）
金属度贴图控制表面的金属属性，白色金属，黑色非金属。
constmetalnessMap=textureLoader.load('metalness.jpg');constmaterial=newTHREE.MeshStandardMaterial({map:colorMap,metalnessMap:metalnessMap,metalness:0.5// 基础金属度（与贴图混合）});9. 环境遮蔽贴图（aoMap）
环境遮蔽贴图模拟环境光被遮挡的效果，增强立体感。
constaoMap=textureLoader.load('ao.jpg');// 需要第二组 UV 坐标geometry.setAttribute('uv2',newTHREE.BufferAttribute(uv2Array,2));constmaterial=newTHREE.MeshStandardMaterial({map:colorMap,aoMap:aoMap,aoMapIntensity:1.0});10. 自发光贴图（emissiveMap）
自发光贴图控制物体哪些部分发光。
constemissiveMap=textureLoader.load('emissive.jpg');constmaterial=newTHREE.MeshStandardMaterial({map:colorMap,emissive:0x44aa88,emissiveMap:emissiveMap,emissiveIntensity:0.5});11. 高光贴图（specularMap）
高光贴图控制 Phong 材质的高光区域。
constspecularMap=textureLoader.load('specular.jpg');constmaterial=newTHREE.MeshPhongMaterial({map:colorMap,specularMap:specularMap,specular:0x444444,shininess:60});12. 光照贴图（lightMap）
光照贴图预烘焙光照信息。
constlightMap=textureLoader.load('lightmap.jpg');geometry.setAttribute('uv2',newTHREE.BufferAttribute(uv2Array,2));constmaterial=newTHREE.MeshStandardMaterial({map:colorMap,lightMap:lightMap,lightMapIntensity:1.0});13. 完整示例
import*asTHREEfrom'three';import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js';constscene=newTHREE.Scene();scene.background=newTHREE.Color(0x111122);constcamera=newTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);camera.position.set(4,4,6);camera.lookAt(0,0,0);constrenderer=newTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);renderer.shadowMap.enabled=true;document.body.appendChild(renderer.domElement);constcontrols=newOrbitControls(camera,renderer.domElement);controls.enableDamping=true;// 光源constambientLight=newTHREE.AmbientLight(0x404040,0.5);scene.add(ambientLight);constdirectionalLight=newTHREE.DirectionalLight(0xffffff,1);directionalLight.position.set(5,10,7);directionalLight.castShadow=true;scene.add(directionalLight);constfillLight=newTHREE.PointLight(0x88aaff,0.3);fillLight.position.set(-2,2,3);scene.add(fillLight);// 辅助对象constaxesHelper=newTHREE.AxesHelper(5);scene.add(axesHelper);constgridHelper=newTHREE.GridHelper(10,20);scene.add(gridHelper);// 纹理加载器consttextureLoader=newTHREE.TextureLoader();// 创建程序化纹理constcanvas=document.createElement('canvas');canvas.width=512;canvas.height=512;constctx=canvas.getContext('2d');// 颜色贴图ctx.fillStyle='#44aa88';ctx.fillRect(0,0,canvas.width,canvas.height);ctx.fillStyle='#ff6600';for(leti=0;i<100;i++){ctx.fillRect(Math.random()*canvas.width,Math.random()*canvas.height,10,10);}constcolorMap=newTHREE.CanvasTexture(canvas);// 法线贴图constnormalCanvas=document.createElement('canvas');normalCanvas.width=512;normalCanvas.height=512;constnormalCtx=normalCanvas.getContext('2d');normalCtx.fillStyle='#8080ff';normalCtx.fillRect(0,0,normalCanvas.width,normalCanvas.height);for(leti=0;i<200;i++){constx=Math.random()*normalCanvas.width;consty=Math.random()*normalCanvas.height;normalCtx.fillStyle=`rgb(128,${Math.random()*255}, 255)`;normalCtx.fillRect(x,y,8,8);}constnormalMap=newTHREE.CanvasTexture(normalCanvas);// 粗糙度贴图constroughnessCanvas=document.createElement('canvas');roughnessCanvas.width=512;roughnessCanvas.height=512;constroughnessCtx=roughnessCanvas.getContext('2d');roughnessCtx.fillStyle='#888888';roughnessCtx.fillRect(0,0,roughnessCanvas.width,roughnessCanvas.height);for(leti=0;i<300;i++){constgray=Math.random()*255;roughnessCtx.fillStyle=`rgb(${gray},${gray},${gray})`;roughnessCtx.fillRect(Math.random()*roughnessCanvas.width,Math.random()*roughnessCanvas.height,6,6);}constroughnessMap=newTHREE.CanvasTexture(roughnessCanvas);// 金属度贴图constmetalnessCanvas=document.createElement('canvas');metalnessCanvas.width=512;metalnessCanvas.height=512;constmetalnessCtx=metalnessCanvas.getContext('2d');metalnessCtx.fillStyle='#000000';metalnessCtx.fillRect(0,0,metalnessCanvas.width,metalnessCanvas.height);for(leti=0;i<200;i++){constval=Math.random()*255;metalnessCtx.fillStyle=`rgb(${val},${val},${val})`;metalnessCtx.fillRect(Math.random()*metalnessCanvas.width,Math.random()*metalnessCanvas.height,6,6);}constmetalnessMap=newTHREE.CanvasTexture(metalnessCanvas);// 球体constgeometry=newTHREE.SphereGeometry(1.2,128,128);constmaterial=newTHREE.MeshStandardMaterial({map:colorMap,normalMap:normalMap,roughnessMap:roughnessMap,metalnessMap:metalnessMap,metalness:0.5,roughness:0.5});constsphere=newTHREE.Mesh(geometry,material);sphere.castShadow=true;sphere.receiveShadow=true;scene.add(sphere);// 平面constplaneGeometry=newTHREE.PlaneGeometry(6,6);constplaneMaterial=newTHREE.MeshStandardMaterial({color:0x336699,side:THREE.DoubleSide});constplane=newTHREE.Mesh(planeGeometry,planeMaterial);plane.rotation.x=-Math.PI/2;plane.position.y=-1.5;plane.receiveShadow=true;scene.add(plane);// GUI 控制importGUIfrom'lil-gui';constgui=newGUI();consttextureFolder=gui.addFolder('贴图控制');textureFolder.add(material,'metalness',0,1).name('金属度');textureFolder.add(material,'roughness',0,1).name('粗糙度');textureFolder.add(material,'normalScale',{x:1,y:1},'x',0,2).name('法线强度');textureFolder.open();// 动画functionanimate(){requestAnimationFrame(animate);sphere.rotation.y+=0.005;controls.update();renderer.render(scene,camera);}animate();window.addEventListener('resize',onWindowResize,false);functiononWindowResize(){camera.aspect=window.innerWidth/window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth,window.innerHeight);}14. 总结
| 贴图类型 | 材质属性 | 用途 | 所需材质 |
|---|---|---|---|
| 颜色贴图 | map | 基础颜色 | Standard, Physical |
| 法线贴图 | normalMap | 表面细节 | Standard, Physical |
| 凹凸贴图 | bumpMap | 表面凹凸 | Standard, Physical |
| 置换贴图 | displacementMap | 顶点位移 | Standard, Physical |
| 粗糙度贴图 | roughnessMap | 表面光滑度 | Standard, Physical |
| 金属度贴图 | metalnessMap | 金属属性 | Standard, Physical |
| 环境遮蔽 | aoMap | 环境光遮挡 | Standard, Physical |
| 自发光贴图 | emissiveMap | 发光区域 | Standard, Physical |
| 透明度贴图 | alphaMap | 透明区域 | Standard, Physical |
| 高光贴图 | specularMap | 高光区域 | Phong |
