Three.js 3D 地图特效与材质实现指南 _

一、地形材质MeshStandardMaterial1.1 实现原理使用 Three.js 的 PBR物理正确渲染材质结合多张纹理实现真实感地形效果漫反射纹理diffuseMap控制表面颜色位移纹理displacementMap控制地形起伏法线纹理normalMap控制表面细节和光照反应粗糙度纹理roughnessMap控制表面光滑程度1.2 完整 HTML 实现123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100地形材质示例二、飞线材质ShaderMaterial 2.1 实现原理 使用自定义 ShaderMaterial 实现数据流向的动态飞线效果顶点着色器传递 progress 属性到片元着色器片元着色器基于时间计算发光头位置使用 smoothstep 创建三级渐变发光效果head发光头位置fract 循环body主体渐变core核心高亮2.2 完整 HTML 实现123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117飞线材质示例三、侧边渐变材质ShaderMaterial 3.1 实现原理 用于地图 3D 侧边墙的渐变渲染根据顶点的 Z 坐标深度混合三种颜色底层bottomColor → midColorsmoothstep 0~0.24上层lower → topColorsmoothstep 0.34~1边缘发光顶部边缘添加发光效果3.2 完整 HTML 实现123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121侧边渐变材质示例四、追光效果 4.1 实现原理 生成省份轮廓路径网格化算法 路径平滑处理多次迭代 构建多个 LineBasicMaterial 线段透明度沿路径渐变 动画循环中更新每个线段的起点和终点位置形成追逐效果 4.2 完整 HTML 实现 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149追光效果示例五、飞线特效 5.1 实现原理 确定源点首都/省会和目标点其他城市 使用 QuadraticBezierCurve3 创建贝塞尔曲线路径 双层结构基线静态 流动线动态 流动线使用 ShaderMaterial 实现发光流动效果 5.2 完整 HTML 实现 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155飞线特效示例六、旋转环装饰 6.1 实现原理 多层环形装饰元素包含软边缘环RingMesh弧线组多个圆弧刻度线均匀分布的短线整体旋转动画6.2 完整 HTML 实现123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143旋转环装饰示例七、高亮交互效果 7.1 实现原理 鼠标悬停时触发以下效果区域抬升平滑过渡到目标高度侧边墙变色颜色变亮高亮层透明度增加地形材质变化颜色、自发光、透明度所有状态变化均使用 lerp 插值实现平滑过渡。7.2 完整 HTML 实现123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170高亮交互效果示例八、呼吸浮动效果 8.1 实现原理 地图整体沿 Z 轴做正弦波动动画产生呼吸般的浮动效果1mapGroup.position.z basePosition.z Math.sin(t * 0.55) * 2;周期约 11.4 秒振幅 2 单位。8.2 完整 HTML 实现123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102呼吸浮动效果示例九、总结