第三部分-纹理与贴图——15. 纹理类型

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 法线贴图属性

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. 总结