three-demos/README_2.md

Three.js 3D 可视化开发

本文档整理了化工/工业仿真平台开发中 8 大核心功能的实现原理，以及 PBR 材质系统的基础概念。

---

第一部分：8 大核心功能模块实现原理

1. 设置地面 (Ground Setup)

• 原理：使用 PlaneGeometry 创建平面网格，并旋转 90 度使其水平平铺。
• 材质风格：
  • 实景风：使用 PBR 材质加载沥青、水泥或草地贴图。
  • 科技风：使用 GridHelper 或自定义 Shader 制作深色背景下的发光网格（工业软件常用）。
• 关键点：必须开启 receiveShadow = true，否则模型会有“悬浮感”。

2. 地面光效 (Ground Lighting Effects)

• 原理：利用 Shader（着色器） 或 贴图映射 模拟光效，而非消耗性能的实时光源。
• 常见效果：
  • 镜面反射：使用 Reflector 或 SSR 模拟潮湿/打蜡地面。
  • 雷达/扩散波：在 Shader 中利用距离和正弦波 (sin(time)) 计算透明度，形成向外扩散的光环。
  • 聚焦光：配合 SpotLight 和体积光技术模拟丁达尔效应。

3. 模型漫游 (Roaming / Inspection)

• 本质：摄像机（Camera）位置和朝向的连续变化。
• 实现方式：
  • 自动巡检：使用 CatmullRomCurve3 定义路径，通过 progress (0-1) 获取坐标赋值给摄像机。使用 getTangentAt 保持视线朝前。
  • 点击移动：利用 Raycaster 获取地面点击坐标，使用动画库（GSAP/TWEEN）平滑过渡摄像机位置。

4. 模型动画 (Model Animation)

• 原理：播放模型文件（GLTF/FBX）自带的骨骼或关键帧动画。
• 核心系统：AnimationMixer。
• 流程：获取 clips -> 创建 mixer -> 生成 action -> 调用 .play()。
• 驱动：必须在渲染循环中每一帧调用 mixer.update(deltaTime)。

5. 修改材质与告警 (Material Changes / Alerts)

• 原理：遍历模型树，查找目标 Mesh 并修改 Material 属性。
• 告警实现：
  • 查找：scene.getObjectByName('设备ID')。
  • 高亮：修改 material.emissive（自发光颜色）及强度，确保在暗处可见。
  • 呼吸闪烁：在渲染循环中利用 Math.sin(Date.now()) 动态改变发光强度或透明度。

6. 粒子效果 (Particles - 蒸汽/火焰)

• 原理：大量始终面向摄像机的微小平面（Billboards/Sprites）。
• 数据结构：THREE.Points + BufferGeometry。
• 运动逻辑：每一帧更新粒子 Y 轴（上升），增加 X/Z 轴随机扰动（扩散），生命周期结束时重置位置。

7. 模型与 Web 交互 (Interaction)

• 鼠标 -> 3D (点击)：
  • 利用 Raycaster 将屏幕坐标转为射线，检测与 Mesh 的相交，获取点击对象 ID 以触发 UI 弹窗。
• 3D -> 2D (标签跟随)：
  • 利用 CSS2DRenderer 或坐标投影 (vector.project(camera))。
  • 将 3D 坐标转为屏幕 XY 坐标，通过 CSS transform 移动 HTML 标签，使其“粘”在模型上。

8. 后期处理 (Post-processing)

• 原理：EffectComposer 接管渲染流程，对离屏缓冲区图像进行像素级处理。
• 常用流水线：
  1. RenderPass (基础画面)
  2. OutlinePass (鼠标悬停高亮/描边)
  3. UnrealBloomPass (辉光/泛光，增加科技感)
  4. FXAAPass / SMAAPass (抗锯齿)

---

第二部分：PBR 材质贴图详解

在物理渲染（PBR）流程中，这三张贴图决定了模型的质感与真实度。

1. 纹理贴图 (Albedo / Base Color Map)

• 通俗解释：“包装纸” 或 “颜值”。
• 作用：决定物体表面的基础颜色和图案。
• 代码属性：material.map

2. 法线贴图 (Normal Map)

• 通俗解释：“伪造的凹凸” 或 “光影魔术”。
• 特征：通常为紫蓝色图片。
• 作用：欺骗光线，让平坦的模型表面呈现出凹凸细节（如砖缝、刻痕），无需增加几何体面数。
• 代码属性：material.normalMap

3. 粗糙度贴图 (Roughness Map)

• 通俗解释：“磨砂纸的目数” 或 “质感”。
• 特征：黑白灰图片。
• 作用：决定表面反光的清晰度。
  • 黑色 (0.0)：光滑、镜面反射（如湿瓷砖）。
  • 白色 (1.0)：粗糙、漫反射（如水泥、灰尘）。
  • 灰色：半哑光（如拉丝金属）。
• 代码属性：material.roughnessMap

综合应用示例：旧化工反应罐

贴图类型	视觉贡献
Color Map	决定罐子是绿色的，局部有棕色锈迹。
Normal Map	让锈迹看起来凹凸不平，漆面有剥落感。
Roughness Map	让绿色漆面有微弱反光，而锈迹部分完全粗糙哑光。