从代码网格到极简大理石：Three.js 高级博物馆场景地板架构指南
在 WebGL 和 Three.js 的世界里，打造一个具有“高级感”的室内场景，最容易暴露塑料感的往往是地板。
很多初学者会用代码画一个网格，或者贴上一张毫无生气的图片，结果就是场景看起来像个粗糙的 90 年代游戏。而在现代的高级博物馆（Open-plan Gallery）设计中，那层微微泛着倒影、质感细腻的抛光大理石地面，才是稳住整个空间气场、拉伸纵深感的灵魂。
本文将以一个 WebGL 博物馆项目为例，详细拆解如何将一块普通的“代码瓷砖地”，重构升级为**“基于物理渲染（PBR）的半透明双层反射地板”**。我们将从最基础的 Three.js 概念讲起，深挖每一个参数背后的光学原理。
从简单的代码网格地板到高级物理渲染（PBR）大理石地板的升级视觉对比。
早期场景俯视图。仅使用单层材质时，地板显得扁平且缺乏光影细节。
采用双层 Mesh 架构后的最终效果。展柜的倒影与大理石的物理质感完美交织。
铺垫：Three.js 世界的基础积木
在深入地板架构之前，我们需要统一一下语言。如果你是前端开发者刚接触 3D，请先记住这三个核心概念：
什么是 Three.js？
Three.js 是一个基于 WebGL 的 JavaScript 3D 库。原生的 WebGL 是一堆晦涩难懂的着色器代码（GLSL）和复杂的矩阵数学，而 Three.js 把它封装成了人类能看懂的对象（如“相机”、“灯光”、“材质”）。它让我们能在网页上用面向对象的方式“搭积木”。
什么是 Mesh（网格模型）？
在 Three.js 中，你在屏幕上看到的几乎所有实体物体，都是一个 Mesh。你可以把它理解为**“骨架 + 皮肤”**的结合体：
- Geometry（几何体/骨架）：决定了物体的形状（比如是一个正方体、一个球，还是一张纯平的矩形平面）。
- Material（材质/皮肤）：决定了物体表面看起来什么样（什么颜色、反不反光、粗不粗糙）。
$$Mesh = Geometry + Material$$
什么是基于物理的材质（MeshStandardMaterial）？
过去的老旧材质（如 MeshBasicMaterial 或 MeshLambertMaterial）是通过简单的算法“模拟”光照，看起来很假。
而 Three.js 提供的 MeshStandardMaterial 是基于物理渲染（Physically Based Rendering, PBR）的。它严格遵循真实世界的光学规律，通过输入不同的贴图（颜色、粗糙度、法线等），告诉引擎光线打在这层表面上该如何反射、散射或吸收。
为什么要使用“双层 Mesh”架构？
地板架构总体框图
回到我们的核心需求：我们需要一块有真实大理石纹理，同时又能像镜子一样反射周围展柜和墙壁的抛光地板。
初学者最容易犯的错误是：试图在一个 Mesh 的材质里解决所有问题。
但现实是残酷的。在 Three.js 中，标准的 PBR 材质（基于 WebGL 现有的实时渲染能力）很难直接高效地计算出像镜面一样完美的实时动态反射（那是光线追踪干的活）。
因此，现代 Web3D 架构通常采用**“光学魔术”来骗过玩家的眼睛——这就是“双层 Mesh 叠加架构”**。
我们将 2 个 Mesh 对象 紧紧贴合在一起：
- 底层： 专职负责“当镜子”（
THREE.Reflector）。 - 顶层： 专职负责“大理石质感”（
THREE.Mesh半透明物理材质）。
让我们逐层剖析。
第一层：隐藏在黑暗中的镜子（底层 Reflector）
这是整个倒影效果的幕后功臣。它通常被放置在 y = -0.01 的位置，紧贴着真正地面的下方。
THREE.Reflector 不是普通的物理材质。它其实是一个包含了一个虚拟相机的特殊平面。引擎会在每一帧，用这个虚拟相机从地板下方倒过来拍摄整个房间（展柜、墙壁、灯光），然后把拍到的画面像“贴纸”一样贴在这个平面上。
因为这是一张动态更新的纹理，所以当你移动视角时，倒影也会跟着完美变化。
核心参数解析：
-
Y轴偏移 (
position.y = -0.01)：为什么不把它和顶层地板放在同一个高度（
y = 0）？这涉及图形学中臭名昭著的 Z-Fighting（深度冲突） 现象。当两个平面在 3D 空间中完全重叠时，显卡会不知道该渲染哪一个，导致画面疯狂闪烁。把它稍微往下挪 0.01 个单位，就能完美避开冲突。 -
底色 (
color: 0xd4d2ce)：Reflector 是没有漫反射贴图槽位的。它只有这一个基础底色。我们将它设定为一个带点暖灰的颜色（
0xd4d2ce），是为了和上层的大理石色调呼应。如果不设或者设得太刺眼，反射出来的画面就会显得不自然。
第二层：决定质感的大理石滤镜（顶层 PBR Mesh）
如果只有底层，那我们的地板就是一面纯粹的滑冰场镜子，这叫“虚假”。
第二层 Mesh 才是赋予空间“博物馆级高级感”的灵魂。它被放置在真正的地面高度（y = 0），使用 MeshStandardMaterial，承载了所有的物理纹理。
它是如何设计的？我们逐个参数来拆解这套复合材质：
纹理贴图（Textures）：定义表面的“相貌”
在物理材质中，贴图是我们赋予模型真实细节的第一步。它们不控制整体，而是决定了材质表面每一处细节的差异：
-
漫反射贴图 (
map: floorColor.jpg)：这是大理石的“素颜照”，提供了最基础的颜色和纹理（比如大理石的灰色肌理和天然裂痕）。我们抛弃了代码画的纯色线条，直接使用高清真实照片。
-
法线贴图 (
normalMap: floor/normal.jpg) & (normalScale: [0.45, 0.45])：这是图形学中最伟大的欺骗术。真实的大理石拼接处是有微小缝隙的，用 3D 模型建出来会撑爆显卡。法线贴图不改变物体形状，而是用 RGB 颜色值告诉光线：“这里有个坑，请按照坑的倾斜角度来折射光线。”0.45 意味着我们保留了适度的接缝凹凸感，但总体保持大理石的平整。
-
粗糙度贴图 (
roughnessMap: floor/roughness.jpg)：它是局部质感的**“均衡器”**。这是一张逐像素变化的黑白图，让地板每个位置的糙度都不一样，交代了岁月踩踏的痕迹和大理石本身的矿物差异。你可以这么直观地对应：
-
贴图偏亮（白）的区域：采样值更大。这意味着该点更糙（磨砂），高光打在这里会被完全散开，不那么像“镜子”。
-
贴图偏暗（黑）的区域：采样值更小。这意味着该点更光滑，更容易产生清晰锐利的高光和倒影。
-
标量微调（Scalars）：定义材质的“全局基调”
有了局部的细节（贴图）还不够，我们还需要通过标量来控制整块地板的宏观表现。这里的核心魔法在于**“整体基调 × 纹路细节”**的相乘逻辑：
-
全局粗糙度 (
roughness: 0.55)：它是控制整块地板平均有多抛光的**“总音量旋钮”**。在 Three.js 底层，该点最终的糙度值实际上是 $material.roughness \times RoughnessMap_{pixel}$（将贴图采样值 0～1 归一化后相乘）。
单独设一张贴图，效果往往起伏太大；单独设一个标量，又会变成死板的纯玻璃或纯水泥。0.55 这个常数作为总旋钮，整体把“由贴图决定的起伏”压暗或提亮，完美避免了整块地要么全镜面、要么全磨砂的极端情况。
-
金属度 (
metalness: 0.04)：如果说粗糙度是控制反光散开程度的旋钮，那么金属度就是决定材质物理阵营的**“频道切换器”**。
在 PBR 渲染中，0 代表绝对的绝缘体（如塑料、木头、石材），1 代表绝对的金属。大理石是典型的电介质，所以它的主频道必须锁定在 0 的一端。我们将它极其克制地微调到 0.04，而不是绝对的 0，是为了模拟真实世界中高级抛光石材表面极其微弱的边缘高光（菲涅尔效应），让大理石看起来既有石材的沉稳，又不失抛光后的硬朗感。
终极融合术：透明度通道（Alpha Blending）
这是双层架构能够成立的核心。
- 开启透明度 (
transparent: true) - 不透明度 (
opacity: 0.68)
上面费尽心机做的大理石材质，如果不开启透明度，它就会像一床不透光的棉被，把底层的镜子（Reflector）捂得严严实实。
当我们把 opacity 设为 0.68 时，神奇的事情发生了：这层大理石变成了一张“半透明的带纹理的滤镜”。
它的数学本质是经典的 Alpha 混合方程：
$$C_{out} = C_{marble} \times 0.68 + C_{reflector} \times (1 - 0.68)$$
这意味着，人眼看到的最终像素，是由 68% 的物理大理石质感（包括它的色彩、凹凸缝隙、粗糙斑驳），加上 32% 的底层动态倒影混合而成的。
底层的倒影穿透了半透明的大理石，又被大理石的法线贴图（凹凸不平）和粗糙度贴图“揉碎”了。于是，一个完美的、带有厚重石材体积感、同时又反射着展柜灯光的高级抛光地面，就诞生了！
总结
在 Three.js 中构建高级场景，很少是一蹴而就的。通过这种“底层 Reflector 承担光学反射 + 顶层 PBR 承担物理质感并通过 Alpha 混合交织”的双层架构，我们不仅实现了图灵级的视觉效果，还兼顾了性能的平衡。
当我们看着展柜底部那微微晕开的影子，延伸在 60x80 的旷阔大理石长廊上时，所有的参数调试都是值得的。
