篇章 3：Three.js 村口皮肤店 🎨 —— 模型不再裸奔欢迎来到新手村村口最火爆的店铺——“皮肤店”！这里没有

🎬 开场白

欢迎来到 新手村村口最火爆的店铺——“皮肤店”！
这里没有氪金抽卡，也没有充值返利，
只有一群 灰扑扑、光秃秃的模型村民，在门口排着长队等着“换新装”。

👀 你看那个小方块：
昨天还是“裸奔村民”，
今天套上一件 木板材质，立马摇身一变成了 小木屋 🪵；

再看那只球：
抹上 金属贴图 后，瞬间变身 高级道具 ⚔️，闪闪发光，
谁见了都想摸两下。

在 Three.js 的世界里：

材质（Material） = 模型的衣服 👕
贴图（Texture） = 衣服上的花纹 🎨

有了它们，你的模型就不再是灰色寡淡的“练习生”，
而是走在 村头 T 台 的 时尚达人 👠。

甚至还能加点 发光效果，
就像穿了夜光鞋，晚上走村口都能成为全场焦点 ✨。

所以接下来，
我们就要带你走进这家 “村口皮肤店”，
看看模型们是如何从：

➡️ 素面朝天 → 穿衣戴帽 → 光芒四射
彻底告别 “裸奔时代” 的！ 🚀

🛒 村口皮肤店 · 趣味菜单

1. 【布衣套装】—— 基础材质 (MeshBasicMaterial)

没有光影效果，就是一件纯色布衣。
适合“刚穿上衣服”的村民。
⚠️ 缺点：打光也没用，完全“无视阳光”。

const material = new THREE.MeshBasicMaterial({ 
  color: 0x00aaff,  // 湖蓝色底色
  wireframe: false, // 画实面，不只画边线
  transparent: true,// 开启透明混合（否则 opacity 不生效）
  opacity: 0.8      // 半透明薄纱效果 ✨
});

👕 MeshBasicMaterial 参数速查表

参数	说明	示例/效果
`color`	基础颜色，16 进制或 CSS 色值	`0x00aaff` → 湖蓝色
`wireframe`	是否只画线框骨架	`true` → 方块只剩骨架，像“铁丝笼子”； `false` → 实心填充
`transparent`	是否允许透明混合（决定 `opacity` 是否生效）	`true` 时 `opacity` 才有效
`opacity`	不透明度，范围 0 ~ 1	`1` → 完全不透明；`0.5` → 半透明薄纱；`0` → 完全隐身

👉 小结：
MeshBasicMaterial 更像是村口的 入门布衣：便宜、好用、不卡顿，但穿出去永远是一副“高冷脸”，再多灯光也不会理你。

2. 【夜光运动服】—— 自发光材质 (MeshLambertMaterial / MeshPhongMaterial + emissive)

可以反光，还能微微发亮 ✨。
适合“晚上村口跳广场舞”的模型。
用起来立马酷炫值+100。

const material = new THREE.MeshPhongMaterial({ 
  color: 0xff5500,    // 火红色底色
  shininess: 50,      // 高光强度，越大越亮
  emissive: 0xffaa33, // 自发光颜色 ✨
  wireframe: false,   // 画实面
  transparent: true,  // 开启透明混合
  opacity: 0.9        // 半透明效果
});

👕 MeshPhongMaterial / MeshLambertMaterial 参数速查表

参数	说明	示例/效果
`color`	基础颜色，16 进制或 CSS 色值	`0xff5500` → 火红色
`shininess`	高光强度，控制光泽反射	`0` → 无光泽；`100` → 镜面反射感强
`emissive`	自发光颜色，会让物体发亮	`0xffaa33` → 暖黄色夜光效果
`wireframe`	是否只画线框骨架	`true` → 骨架；`false` → 实面
`transparent`	是否允许透明混合	`true` 时 `opacity` 才生效
`opacity`	不透明度，0 ~ 1	`1` → 完全不透明；`0.5` → 半透明
`specular`	镜面高光颜色（只对 MeshPhongMaterial 有效）	`0xffffff` → 白色高光
`flatShading`	是否使用平面着色（关闭光滑插值）	`true` → 块面感；`false` → 光滑

MeshLambertMaterial vs MeshPhongMaterial 对比表

特性	MeshLambertMaterial	MeshPhongMaterial
光照类型	漫反射 (Diffuse)	漫反射 + 高光 (Diffuse + Specular)
表面效果	平滑光影，柔和	能反光，有高光和镜面效果
发光能力	不自发光	可通过 `emissive` 属性微微发光
性能	较轻量，适合大批量模型	相对稍重，光照计算多一些
使用场景	日常物体、墙面、衣物、低光环境	金属、光亮物体、夜间发光或高亮场景
高光控制	无	可控制高光颜色 (`specular`) 和强度
贴图支持	支持颜色贴图、法线贴图	支持颜色贴图、法线贴图、高光贴图

高光不明显？别急，先聊聊“光影江湖”

Lambert 材质：纯漫反射，永远没有高光，就像吃了无糖可乐，永远平淡无奇。
Phong 材质：高光狂魔，但高光效果全靠光线“心情好”，看你正不正面被光照。所以，如果你看不到高光，可能是这些原因：

点光源离得远
光线懒得照你的小立方体，高光就暗淡无力。
立方体旋转角度尴尬
高光跑到背面去了，你只看到普通脸。
环境光太亮
环境光太嚣张，把高光一口吞掉，看起来跟 Lambert 一样平淡。

👉 小结

MeshLambertMaterial 更像是村口的 普通棉布衣：穿上后光线柔和、随和，性能轻盈，不会惹眼，但缺少光泽感。
MeshPhongMaterial 则像是村口的 亮闪闪夜行套装：光滑、能反光、还能微微发亮，高光效果拉满，但计算稍微重一点，需要小心搭配光照。

3. 【豪华盔甲】—— 金属质感 (MeshStandardMaterial / MeshPhysicalMaterial)

自带反射、金属光泽
就像把小球打造成“黄金神球” ⚔️
再加 Roughness 调节，就能决定它是“哑光低调”还是“高光刺眼”

👕 MeshStandardMaterial / MeshPhysicalMaterial 参数速查表

参数	类型	默认值	功能说明	幽默解读
`color`	Color	0xffffff	基础色	小球的“盔甲底色”，决定你是金光闪闪还是低调黑金
`metalness`	Float	0.5	金属度	0 → 木头球，1 → 真·黄金神球 ⚔️
`roughness`	Float	0.5	粗糙度	0 → 闪瞎眼的镜面，高光刺眼；1 → 哑光低调，稳重如武林高手
`map`	Texture	null	漫反射贴图	给盔甲披上花纹、徽章或纹理
`normalMap`	Texture	null	法线贴图	假凹凸效果，制造坑坑洼洼的小细节
`roughnessMap`	Texture	null	粗糙度贴图	让盔甲局部高光强弱不一，更真实
`metalnessMap`	Texture	null	金属度贴图	局部金属、局部塑料？说变就变
`envMap`	CubeTexture	null	环境贴图	给你小球加上“外界反射”，走哪闪哪
`envMapIntensity`	Float	1	环境光反射强度	反射的“嚣张指数”，越大越亮
`opacity`	Float	1	透明度	小球透明？不是玻璃就是魔法
`transparent`	Boolean	false	是否开启透明	透明开关，一打开就能穿越墙壁
`emissive`	Color	0x000000	自发光	发光就像自带光环，别人眼睛都亮了
`emissiveIntensity`	Float	1	发光强度	光环大小，亮度随意调

材质类型	使用场景	幽默解读
MeshStandardMaterial	新手村口的普通皮肤店：给模型穿上基础衣服、简单涂色	“基础款皮肤，穿上就行，不用闪光，低调又实用，村口逛街完全够用。”
MeshPhysicalMaterial	高级定制皮肤店：带光泽、反射和金属感的炫酷装备	“高端定制皮肤，亮闪闪、质感十足，走在村口都能吸引路人回头，当然显卡也得扛得住。”
使用建议	Standard 性能友好，Physical 更真实但吃显卡	“Standard 是日常便装，舒服实用；Physical 是派对盛装，精心打扮，炫彩效果惊艳。”

👉 小结

MeshStandardMaterial / MeshPhysicalMaterial就是小球的 豪华盔甲系统，金属度、粗糙度、光泽全都可调，只要光线、贴图和参数配合得当，立刻从“普通球”升级为“黄金神球”⚔️。

4. 【彩虹裙子】—— 法线材质 (MeshNormalMaterial)

不依赖灯光，用法线向量直接计算颜色，就像自带彩虹裙子。
适合“刚做好裙子👗”的村民，随便走都闪闪发光。
⚠️ 缺点：颜色完全跟随几何方向，缺乏真实光影效果，感觉“炫彩但不自然”。

5. 【个性花衬衫】—— 贴图加持 (Texture)

没有贴图？那只是纯色校服。
有了贴图，就能：
- 穿上 木纹衣 → 秒变小木屋 🪵
- 套上 砖块外套 → 直接进化“城墙守护者” 🧱
- 披上 草地纹理 → 妥妥“隐身在草丛的刺客” 🌿

贴图类型	参数设置	幽默点评	视觉效果
木纹 (Wood) 🪵	repeat: true，rotation: 0~90°，roughness: 0.6	穿上它，你就是移动的小木屋，随时可以当背景板	墙纹感、温暖、质感木头
砖块 (Brick) 🧱	repeat: true，bumpScale: 0.2，roughness: 0.8	秒变城墙守护者，抗击打能力 +100	立体感强，稳重硬朗
草地 (Grass) 🌿	repeat: true，bumpScale: 0.1，roughness: 0.3	隐身草丛的刺客，风一吹还摇晃	绿色鲜活，轻盈自然
金属 (Metal) ✨	metalness: 1.0，roughness: 0.2	小钢铁侠上线，闪闪发光	光泽感强，反光明显
水泥 (Concrete) 🏗️	roughness: 0.9，bumpScale: 0.3	冷酷硬朗，都市风	粗糙厚重，坚固耐磨
布料 (Fabric) 👕	repeat: true，roughness: 0.5，normalMap: yes	从纯棉到丝绸，一秒变时尚达人	织物质感明显，柔软自然

🔧小技巧

🌀 repeat → 控制贴图重复次数，穿上后不至于像“被撕碎的墙纸”。
🏔️ bumpScale → 立体感指数，数值越大，凸起越明显。
🌫️ roughness → 表面粗糙度，光滑还是磨砂一目了然。
✨ metalness → 金属感调节，闪还是暗，看你心情。

5. 【特效套装】—— 高级玩法

透明材质：让你像“隐身斗篷”一样，虚虚实实。
法阵光圈（Alpha 通道贴图）：一贴上，直接成为“村口法师”。
发光粒子：自带“氪金特效”，走到哪都自带 BGM 🎶。

🌟 结尾

恭喜你！模型终于学会 穿衣服、发光、耍酷 了。
你现在已经是 Three.js 材质大师，连村口的大妈看到模型都只会点头称赞：“不错，懂穿衣服了！”
更妙的是，你在练材质和贴图的时候，还顺带练了 审美、调试力和幽默感。