1. 从平面到山峦为什么我们需要在Web中重建真实地形作为一名长期在Web 3D领域摸爬滚打的开发者我见过太多用Three.js创建的酷炫模型旋转的几何体、发光的粒子、复杂的机械结构。但当我第一次尝试在浏览器里还原一片真实的山脉时那种感觉是完全不同的。它不再是单纯的视觉奇观而是一种将物理世界的数据逻辑与虚拟空间的视觉表现力相结合的挑战。这不仅仅是“画一座山”而是理解高程数据、处理海量顶点、编写着色器与性能优化之间的一场精密舞蹈。你可能已经熟悉了用BoxGeometry或SphereGeometry来构建基础形状但真实地形是另一回事。它不规则、数据密集且对渲染性能极其敏感。无论是游戏中的开放世界、城市规划的沙盘模拟还是地理信息系统的三维可视化基于真实数据的地形重建都是一个核心且高频的需求。Three.js作为WebGL的友好封装为我们提供了实现这一目标的强大工具链但如何高效、优雅地走完从“一张高程图”到“一片可交互山脉”的完整路径其中充满了值得深究的细节。本教程将带你深入这个流程的每一个环节。我们将不满足于调用一个现成的Terrain插件然后说“看地形出来了”。相反我会拆解从数据获取与处理、几何体生成、着色器编写到交互功能集成的全过程并分享那些官方文档里不会写的、我在实际项目中踩过的坑和总结的优化技巧。我们的目标不仅是“实现”更是“理解”与“优化”让你能真正掌控浏览器中的这片数字山河。2. 地形数据的基石DEM与高度图的选择与处理一切始于数据。没有准确的高程数据重建真实地形就是无源之水。在Web环境中我们最常打交道的是两种形式数字高程模型DEM数据和高度图Heightmap。2.1 理解你的数据源DEM与高度图的本质区别首先得厘清概念这决定了后续所有处理流程的起点。数字高程模型DEM是一个二维数组每个单元格存储一个高程值通常以米为单位。它可以是浮点数精度高能忠实反映真实的地形起伏。常见的格式如GeoTIFF但这类文件通常体积庞大且包含大量地理坐标信息投影、坐标系等不适合直接用于WebGL。高度图Heightmap则是一张灰度图像如PNG、JPG其中每个像素的亮度0-255或颜色通道值被映射为对应点的高度。黑色0通常代表最低点白色255代表最高点。它的优势是格式通用、易于传输和GPU读取是WebGL/Three.js生态中的标准输入格式。注意高度图是DEM的一种可视化或简化表现形式。将高精度的DEM数据归一化并渲染成一张灰度图就得到了高度图。这个过程本身就有学问比如如何选择高程范围以避免地形被“压扁”或“拉伸”。2.2 实战数据获取与预处理流程假设我们的目标是渲染北京西山地区的一片地形。我不会直接给你一个高度图文件而是展示从零开始的完整链路因为数据源的差异会导致后续步骤完全不同。路径一使用公开的SRTM或ASTER GDEM数据美国航天局NASA的SRTM和ASTER GDEM数据是免费且覆盖全球的。你可以从USGS EarthExplorer等平台下载指定区域的GeoTIFF文件。接下来是关键的处理步骤数据裁剪与重投影下载的TIFF文件可能覆盖区域过大且是特定的地理坐标系如WGS84。你需要使用QGIS或GDAL命令行工具将其裁剪到目标范围并可能转换为更适合的投影对于小范围直接使用WGS84的经纬度作为XY坐标也可以但需注意单位换算。# 使用GDAL进行裁剪和格式转换示例非必须但了解流程有益 # gdalwarp -te 116.0 39.8 116.2 40.0 input.tif output_cropped.tif # gdal_translate -of PNG -scale 0 1000 0 255 output_cropped.tif heightmap.png这里-scale参数至关重要它将原始高程值例如0-1000米线性映射到0-255的像素亮度范围。你需要根据实际地形的高差来调整这个范围否则地形会失去细节或显得不自然。导出为Web友好格式将处理后的DEM导出为一张PNG格式的高度图。分辨率如1024x1024将直接决定生成几何体的顶点数量需要在细节和性能间权衡。路径二使用程序化或美术生成的高度图如果你不需要真实地理数据只是想快速创建一个看起来“真实”的山地场景那么像World Machine、Gaea这类专业地形软件甚至Photoshop的滤镜都可以生成漂亮的高度图。这时你关注的重点是法线贴图的生成和纹理的融合我们会在后面详细讨论。路径三使用在线的地形数据服务对于快速原型或特定区域像https://tangrams.github.io/heightmapper/这样的在线工具非常方便它允许你框选地图区域并直接导出高度图。这是入门最快的方式。无论哪种路径最终你手头应该有一张heightmap.png。在进入代码之前还有最后一个预处理建议使用图像编辑软件检查你的高度图。打开Photoshop或GIMP观察其直方图。理想情况下像素值应分布在整个0-255范围如果大量像素堆积在中间灰度说明地形高差不足视觉效果会显得平坦。你可以用“色阶”或“曲线”工具进行轻微调整以增强对比度但这会改变真实数据需谨慎。3. 核心构建从高度图到Three.js几何体有了高度图我们就可以在Three.js中创建地形几何体了。这里有几个关键的实现方案各有优劣。3.1 方案A使用PlaneGeometry与高度图采样最常用这是最经典、最灵活的方法。其核心思想是先创建一个具有大量细分段数的平面网格然后根据高度图中每个像素的值去抬升对应顶点的Y坐标。import * as THREE from three; import { TextureLoader } from three; // 1. 创建细分平面 const width 100; // 地形在XZ平面的宽度 const height 100; // 地形在XZ平面的深度 const widthSegments 255; // 细分段数通常比高度图尺寸小1 const heightSegments 255; const geometry new THREE.PlaneGeometry(width, height, widthSegments, heightSegments); geometry.rotateX(-Math.PI / 2); // 让平面“站起来”变成XZ平面Y轴向上 // 2. 加载高度图纹理 const textureLoader new THREE.TextureLoader(); const heightMapTexture textureLoader.load(path/to/heightmap.png); // 关键必须等待纹理加载完成才能处理顶点 heightMapTexture.onLoad () { // 3. 获取纹理的像素数据 // 注意在浏览器中直接读取纹理像素数据比较麻烦通常需要借助Canvas或预处理的数组。 // 更常见的做法是在将高度图作为纹理加载之前已经通过Image对象或Ajax获取了其像素数据数组。 // 这里假设我们有一个名为 heightData 的Uint8Array尺寸为256x256已在纹理加载前准备好。 processVertices(geometry, heightData, widthSegments 1, heightSegments 1); }; function processVertices(geometry, heightData, dataWidth, dataHeight) { const vertices geometry.attributes.position.array; const scaleY 10; // 高度缩放系数控制山脉的陡峭程度 for (let i 0; i vertices.length; i 3) { // vertices[i]是x, vertices[i1]是y初始为0, vertices[i2]是z const vertexIndex i / 3; const xPercent (vertices[i] / width 0.5); // 从[-w/2, w/2]映射到[0, 1] const zPercent (vertices[i2] / height 0.5); // 从[-h/2, h/2]映射到[0, 1] // 根据顶点在平面上的比例找到高度图中对应的像素索引 const pixelX Math.floor(xPercent * (dataWidth - 1)); const pixelY Math.floor(zPercent * (dataHeight - 1)); const pixelIndex (pixelY * dataWidth pixelX) * 4; // RGBA格式每像素4字节 // 获取红色通道值作为高度灰度图RGB const heightValue heightData[pixelIndex] / 255; // 归一化到[0, 1] // 修改顶点的Y坐标 vertices[i 1] heightValue * scaleY; } // 4. 至关重要更新法线和边界框 geometry.attributes.position.needsUpdate true; geometry.computeVertexNormals(); // 重新计算法线光照效果才正确 geometry.computeBoundingBox(); geometry.computeBoundingSphere(); }为什么必须computeVertexNormals平面在创建时所有顶点法线都指向正上方。当你大幅度抬升某些顶点后相邻面的朝向发生了剧烈变化。如果不重新计算法线光照会完全错误地形看起来会像一块平整的、打了凹凸贴图的布而不是有立体感的山脉。这个计算虽然消耗性能但必不可少。3.2 方案B使用BufferGeometry与顶点着色器高性能当你的地形网格非常密集比如512x512或更高时CPU端逐顶点修改position.array并计算法线可能会造成卡顿。更高级的做法是将高度图作为纹理传入着色器在GPU端实时计算顶点位移。这是性能最优的方案也为实现动态地形如海浪、侵蚀模拟打开了大门。其核心是创建一个ShaderMaterial在顶点着色器Vertex Shader中读取高度图纹理并据此改变gl_Position。// 顶点着色器代码 (GLSL) const vertexShader uniform sampler2D heightMap; uniform float uHeightScale; uniform float uWidth; uniform float uHeight; varying vec2 vUv; varying float vElevation; void main() { vUv uv; // 从高度图纹理采样r通道存储高度信息 vec4 heightColor texture2D(heightMap, uv); float elevation heightColor.r * uHeightScale; vElevation elevation; // 在本地坐标的y轴方向进行位移 vec3 displacedPosition position normal * elevation; gl_Position projectionMatrix * modelViewMatrix * vec4(displacedPosition, 1.0); } ; // 片元着色器代码 (GLSL) - 可以根据高程着色 const fragmentShader varying vec2 vUv; varying float vElevation; void main() { // 简单的高程着色低处绿色高处白色/灰色 vec3 color mix(vec3(0.0, 0.3, 0.0), vec3(0.8, 0.8, 0.8), vElevation); gl_FragColor vec4(color, 1.0); } ; // 在Three.js中创建材质 const terrainMaterial new THREE.ShaderMaterial({ uniforms: { heightMap: { value: heightMapTexture }, uHeightScale: { value: 15.0 }, uWidth: { value: 100 }, uHeight: { value: 100 } }, vertexShader: vertexShader, fragmentShader: fragmentShader, wireframe: false // 设为true可以查看网格结构 }); // 几何体仍然是一个细分平面但位置数据保持不变 const geometry new THREE.PlaneGeometry(100, 100, 256, 256); geometry.rotateX(-Math.PI / 2); const terrainMesh new THREE.Mesh(geometry, terrainMaterial); scene.add(terrainMesh);这个方案的优势性能所有顶点位移计算在GPU上并行完成效率极高。动态性只需更新uniform变量如uHeightScale或另一张高度图纹理地形就能实时变化无需更新CPU端的几何体数据。灵活性着色器里可以做任何事比如基于高度混合多种纹理、模拟雪线、实现视差映射增加细节等。一个关键的坑法线计算。在着色器里动态位移后CPU端的法线信息是错的。为了获得正确的光照你有两个选择在片元着色器中动态计算法线通过采样高度图相邻像素用差分法计算当前点的法线向量。这精度高但计算量稍大。// 在片元着色器中添加 uniform float uTexelSize; // 1.0 / textureSize varying vec2 vUv; uniform sampler2D heightMap; uniform float uHeightScale; vec3 calculateNormal(vec2 uv) { float left texture2D(heightMap, uv - vec2(uTexelSize, 0.0)).r * uHeightScale; float right texture2D(heightMap, uv vec2(uTexelSize, 0.0)).r * uHeightScale; float bottom texture2D(heightMap, uv - vec2(0.0, uTexelSize)).r * uHeightScale; float top texture2D(heightMap, uv vec2(0.0, uTexelSize)).r * uHeightScale; vec3 dx vec3(2.0 * uTexelSize * uWidth, right - left, 0.0); vec3 dy vec3(0.0, top - bottom, 2.0 * uTexelSize * uHeight); return normalize(cross(dx, dy)); // 注意叉乘顺序确保法线朝上 }使用THREE.MeshNormalMaterial或生成法线贴图前者直接可视化法线后者是更常见的做法——预计算一张法线贴图Normal Map在着色器中采样它来获取法线信息而不是动态计算。这能极大提升性能。3.3 方案C使用现成的扩展或库如果你追求开发速度可以考虑一些社区库比如three-terrain。但根据我的经验直接使用黑盒库虽然快但遇到定制化需求比如特殊的数据格式、独特的着色效果、性能瓶颈时调试和理解成本反而更高。掌握了上述两种核心方案你就能应对绝大多数情况并且拥有完全的掌控力。4. 赋予生命纹理、光照与细节增强一个只有单一颜色的地形是枯燥的。真实感来自于丰富的表面细节和恰当的光照反应。4.1 多纹理混合与三平面映射真实的地表有岩石、草地、砂土、积雪它们随海拔和坡度分布。实现这一效果的经典技术是多纹理混合Multi-texture Blending。步骤1准备基础纹理准备四张或更多无缝平铺Tiling的纹理贴图例如grass.jpg,rock.jpg,dirt.jpg,snow.jpg。每张纹理最好附带法线贴图Normal Map和粗糙度贴图Roughness Map以增强质感。步骤2定义混合规则在片元着色器中根据当前片元的信息通常是高程vElevation和法线normal的Y分量或坡度来决定各纹理的混合权重。// 在片元着色器中 uniform sampler2D grassTexture; uniform sampler2D rockTexture; uniform sampler2D snowTexture; varying float vElevation; varying vec3 vNormal; void main() { vec3 grassColor texture2D(grassTexture, vUv * 20.0).rgb; // 平铺20次 vec3 rockColor texture2D(rockTexture, vUv * 30.0).rgb; vec3 snowColor texture2D(snowTexture, vUv * 15.0).rgb; // 基于高程的混合权重 float grassWeight 1.0 - smoothstep(0.3, 0.5, vElevation); float rockWeight smoothstep(0.3, 0.5, vElevation) - smoothstep(0.6, 0.8, vElevation); float snowWeight smoothstep(0.6, 0.8, vElevation); // 基于坡度的修正陡峭处更多岩石 float slope 1.0 - vNormal.y; // vNormal.y接近1表示平坦接近0表示陡峭 rockWeight max(rockWeight, slope * 0.7); grassWeight grassWeight * (1.0 - slope); // 归一化权重确保总和为1 float total grassWeight rockWeight snowWeight; grassWeight / total; rockWeight / total; snowWeight / total; vec3 finalColor grassColor * grassWeight rockColor * rockWeight snowColor * snowWeight; gl_FragColor vec4(finalColor, 1.0); }步骤3解决陡坡纹理拉伸问题——三平面映射上述代码在陡峭的悬崖上会出现纹理被严重拉伸的问题因为UV是基于水平投影的。三平面映射Tri-planar Mapping是解决这个问题的银弹。它的原理是在世界空间的X、Y、Z三个方向上分别投影纹理然后根据法线方向混合这三个投影结果。vec3 triplanarBlend pow(abs(vWorldNormal), vec3(4.0)); // 4.0是混合锐度因子 triplanarBlend triplanarBlend / (triplanarBlend.x triplanarBlend.y triplanarBlend.z); // 分别计算三个平面的纹理坐标 vec3 xAxis texture2D(rockTexture, worldPos.yz).rgb; vec3 yAxis texture2D(rockTexture, worldPos.xz).rgb; vec3 zAxis texture2D(rockTexture, worldPos.xy).rgb; // 按法线方向混合 vec3 texColor xAxis * triplanarBlend.x yAxis * triplanarBlend.y zAxis * triplanarBlend.z;将多纹理混合的规则与三平面映射结合你就能得到在任意角度都纹理细节清晰、分布合理的地形表面。这是我强烈推荐的做法虽然着色器代码会复杂一些但视觉效果提升是质的飞跃。4.2 光照与阴影的优化策略地形通常是一个巨大的网格直接对其计算实时阴影THREE.DirectionalLightShadow开销巨大。这里有几个实战策略使用烘焙光照贴图Lightmap对于静态光源如太阳可以预先在3D软件如Blender或使用Three.js的LightMap功能烘焙阴影到一张纹理上。这能提供高质量的静态阴影且运行时零成本。降低阴影贴图分辨率与范围如果必须用实时阴影务必为定向光DirectionalLight的阴影相机shadow.camera设置紧贴地形的边界left,right,top,bottom,near,far。避免让阴影相机渲染整个场景只渲染地形所在的区域。同时将shadow.mapSize设置为合理值如1024x1024不是越大越好。考虑屏幕空间阴影Screen-Space Shadows或距离场阴影DF Shadows对于超大地形这些基于后处理或预计算的阴影技术可能是更好的选择但它们实现更复杂。4.3 环境遮蔽与细节法线环境光遮蔽AO可以在建模阶段烘焙一张AO贴图用于在缝隙、凹陷处添加自然的阴影大幅增强体积感。细节法线贴图基础网格的法线可能比较平滑。叠加一张高频的细节法线贴图Detail Normal Map可以在不增加顶点数的前提下为岩石表面、草地等增加丰富的微观几何错觉让表面在近处观看时也不显单调。5. 性能攻坚LOD与视锥裁剪一个1000x1000顶点的地形网格在远处看和近处看所需的细节程度是天差地别的。在远处用全精度网格是巨大的性能浪费。这就是层次细节Level of Detail, LOD技术要解决的问题。5.1 实现基于距离的网格LODThree.js自带THREE.LOD对象但对于地形这种规则网格更高效的做法是准备多个不同细分级别的PlaneGeometry例如高模 256x256中模 128x128低模 64x64然后根据相机距离切换。const highResGeometry new THREE.PlaneGeometry(100, 100, 255, 255); const midResGeometry new THREE.PlaneGeometry(100, 100, 127, 127); const lowResGeometry new THREE.PlaneGeometry(100, 100, 63, 63); // ... 对每个geometry应用相同的高度图位移处理 ... const lod new THREE.LOD(); lod.addLevel(new THREE.Mesh(highResGeometry, material), 0); // 0米内使用高模 lod.addLevel(new THREE.Mesh(midResGeometry, material), 50); // 50米外切换中模 lod.addLevel(new THREE.Mesh(lowResGeometry, material), 200); // 200米外切换低模 scene.add(lod); // 在渲染循环中更新LODThree.js r125版本需要手动更新 function animate() { lod.update(camera); // ... 其他渲染逻辑 }重要提醒直接切换整个几何体会导致明显的“跳变”Popping。更高级的做法是使用几何变形镶嵌Geometric Mipmapping或分块LODChunked LOD在着色器中实现顶点之间的平滑过渡但这超出了基础教程的范围。对于大多数情况分块离散LOD已经能带来显著的性能提升。5.2 分块Chunking渲染与视锥裁剪将整个大地形分割成多个小块Chunk例如16x16块。每个块是一个独立的Mesh。这样做有两大好处视锥裁剪Frustum CullingThree.js的渲染器会自动检查每个Mesh的包围球BoundingSphere是否在相机视锥体内不在的就不渲染。分块后远处或视线外的地形块会被完全剔除大幅减少绘制调用Draw Calls和顶点处理量。独立LOD可以为每个地形块独立设置LOD级别。靠近相机的块用高模远离的用低模。实现分块需要一些额外的逻辑来计算每个块对应的高度图数据区域并为其创建独立的几何体和网格。这是构建大型无缝世界的标准做法。5.3 其他性能贴士合并几何体对于使用相同材质的多个低细节层级地形块可以考虑使用BufferGeometryUtils.mergeBufferGeometries进行静态合并以减少Draw Calls。但合并后无法进行独立的视锥裁剪需权衡。避免每帧更新顶点数据除非是做动态地形否则位移和法线计算应在初始化时完成。确保在渲染循环中不要调用geometry.attributes.position.needsUpdate true。使用MeshBasicMaterial或自定义简单着色器进行深度预渲染Depth Pre-pass在复杂场景中可以先用地形的简化材质只写深度不计算复杂光照渲染一遍填充深度缓冲区。后续渲染其他物体时被地形遮挡的像素可以提前跳过片元着色提升性能。6. 交互与调试让地形“活”起来6.1 实现地形高程采样与射线交互一个常见需求是当用户点击地形时如何获取点击点的精确三维坐标和高程const raycaster new THREE.Raycaster(); const mouse new THREE.Vector2(); function onMouseClick(event) { // 将鼠标坐标归一化到[-1, 1] mouse.x (event.clientX / window.innerWidth) * 2 - 1; mouse.y -(event.clientY / window.innerHeight) * 2 1; raycaster.setFromCamera(mouse, camera); // 假设terrainMesh是你的地形网格 const intersects raycaster.intersectObject(terrainMesh); if (intersects.length 0) { const point intersects[0].point; console.log(点击位置: X${point.x.toFixed(2)}, Y${point.y.toFixed(2)}, Z${point.z.toFixed(2)}); // 你可以在这里放置一个标记如一个小球到point位置 } } window.addEventListener(click, onMouseClick);6.2 在React/Vue框架中集成Three.js地形以React为例使用react-three/fiber和react-three/drei可以更声明式地构建3D场景。import { Canvas, useLoader } from react-three/fiber; import { TextureLoader } from three; import { useMemo } from react; function Terrain() { const heightMap useLoader(TextureLoader, /heightmap.png); const [geometry, material] useMemo(() { // 这里放置之前讲解的几何体创建和处理的逻辑 // 注意在React组件中需要将几何体和材质用useMemo包裹以避免重复创建 const geo new THREE.PlaneGeometry(100, 100, 255, 255); // ... process vertices with heightMap ... const mat new THREE.MeshStandardMaterial({ color: green }); return [geo, mat]; }, [heightMap]); // 依赖项包含heightMap return mesh geometry{geometry} material{material} rotation{[-Math.PI / 2, 0, 0]} /; } function App() { return ( Canvas ambientLight intensity{0.5} / directionalLight position{[10, 10, 5]} intensity{1} castShadow / Terrain / OrbitControls / {/* 来自 react-three/drei方便相机控制 */} /Canvas ); }在框架中集成的关键点资源管理使用useLoader加载纹理框架会帮你处理缓存和清理。性能将几何体和材质的创建包裹在useMemo中防止每次渲染都重新创建。交互使用react-three/drei中的useCursor、useIntersect等hooks可以轻松实现悬停、点击效果。调试react-three/drei提供了Stats /组件显示性能指标TransformControls /用于可视化的对象变换这对调试地形位置和缩放非常有帮助。6.3 调试技巧让问题可视化显示法线将材质临时切换为THREE.MeshNormalMaterial可以直观检查法线计算是否正确应该是平滑的彩色渐变如果出现杂乱色块则法线有误。显示线框设置material.wireframe true可以看清网格的密度和分布。显示顶点创建一个THREE.Points对象使用地形几何体的顶点属性可以将所有顶点渲染为点云检查高度位移是否应用成功。GUI调试使用lil-gui或dat.GUI创建控制面板实时调整高度缩放系数scaleY、光照参数、纹理混合权重等能极大提高调试效率。7. 从原理到实践一个完整的、可交互的示例框架为了将以上所有知识点串联起来我设计了一个简单的、模块化的示例框架思路。你可以基于此进行扩展。项目结构/src /assets heightmap.png grass.jpg, rock.jpg, snow.jpg /js TerrainManager.js // 地形核心逻辑数据加载、几何体生成、LOD管理 ShaderManager.js // 着色器编写与材质管理 InteractionManager.js // 射线交互、拾取 main.js // 主入口初始化场景、相机、渲染循环 index.htmlTerrainManager.js核心片段export class TerrainManager { constructor(scene, options) { this.scene scene; this.options { width: 100, height: 100, segments: 256, heightScale: 20, ...options }; this.chunks []; // 存储所有地形块 this.heightData null; } async init() { // 1. 加载并解析高度图数据 this.heightData await this.loadHeightmap(assets/heightmap.png); // 2. 创建分块地形 const chunkSize this.options.width / 4; // 假设分成4x4块 for (let x 0; x 4; x) { for (let z 0; z 4; z) { const chunk this.createChunk(x, z, chunkSize); this.chunks.push(chunk); this.scene.add(chunk.mesh); } } // 3. 初始化LOD和视锥裁剪简化版实际需在渲染循环更新 console.log(Terrain loaded with, this.chunks.length, chunks.); } createChunk(gridX, gridZ, size) { // 计算该块对应的顶点数据范围 const startX gridX * (this.options.segments / 4); const startZ gridZ * (this.options.segments / 4); // 创建几何体并应用高度位移基于this.heightData的子集 const geometry new THREE.PlaneGeometry(size, size, this.options.segments/4, this.options.segments/4); geometry.rotateX(-Math.PI / 2); geometry.translate(gridX * size - this.options.width/2 size/2, 0, gridZ * size - this.options.height/2 size/2); // ... 应用高度位移的代码参考第3.1节... // 创建材质可以是ShaderMaterial const material new THREE.MeshStandardMaterial({ color: 0x88aa44, flatShading: false }); const mesh new THREE.Mesh(geometry, material); mesh.castShadow true; mesh.receiveShadow true; return { mesh, gridX, gridZ }; } // ... 其他方法loadHeightmap, updateLOD 等 ... }在main.js中你只需要初始化TerrainManager并在渲染循环中调用可能的更新方法如LOD更新。将交互逻辑放在InteractionManager中。这种分离让代码更清晰也便于你单独优化或替换某个模块比如将CPU位移改为GPU着色器位移。走到这里你已经掌握了在Three.js中从零构建真实地形的完整技术栈。从数据准备、几何体生成、着色器优化、性能调优到交互集成每一个环节都有其门道和陷阱。我分享的这些经验很多都是经过项目验证、踩过坑后总结出来的。记住地形的逼真度是“数据精度”、“几何细节”、“表面材质”和“光照交互”共同作用的结果需要根据你的项目需求是精细的飞行模拟还是广阔的战略地图来权衡和调整。最有效的学习方式就是动手将上面的代码片段组合起来看着一片数字山脉在自己的浏览器中拔地而起那时你会对每一个参数和每一行代码有更深的理解。 Three.js地形生成全解析：从高度图到可交互山脉的Web 3D实践
1. 从平面到山峦为什么我们需要在Web中重建真实地形作为一名长期在Web 3D领域摸爬滚打的开发者我见过太多用Three.js创建的酷炫模型旋转的几何体、发光的粒子、复杂的机械结构。但当我第一次尝试在浏览器里还原一片真实的山脉时那种感觉是完全不同的。它不再是单纯的视觉奇观而是一种将物理世界的数据逻辑与虚拟空间的视觉表现力相结合的挑战。这不仅仅是“画一座山”而是理解高程数据、处理海量顶点、编写着色器与性能优化之间的一场精密舞蹈。你可能已经熟悉了用BoxGeometry或SphereGeometry来构建基础形状但真实地形是另一回事。它不规则、数据密集且对渲染性能极其敏感。无论是游戏中的开放世界、城市规划的沙盘模拟还是地理信息系统的三维可视化基于真实数据的地形重建都是一个核心且高频的需求。Three.js作为WebGL的友好封装为我们提供了实现这一目标的强大工具链但如何高效、优雅地走完从“一张高程图”到“一片可交互山脉”的完整路径其中充满了值得深究的细节。本教程将带你深入这个流程的每一个环节。我们将不满足于调用一个现成的Terrain插件然后说“看地形出来了”。相反我会拆解从数据获取与处理、几何体生成、着色器编写到交互功能集成的全过程并分享那些官方文档里不会写的、我在实际项目中踩过的坑和总结的优化技巧。我们的目标不仅是“实现”更是“理解”与“优化”让你能真正掌控浏览器中的这片数字山河。2. 地形数据的基石DEM与高度图的选择与处理一切始于数据。没有准确的高程数据重建真实地形就是无源之水。在Web环境中我们最常打交道的是两种形式数字高程模型DEM数据和高度图Heightmap。2.1 理解你的数据源DEM与高度图的本质区别首先得厘清概念这决定了后续所有处理流程的起点。数字高程模型DEM是一个二维数组每个单元格存储一个高程值通常以米为单位。它可以是浮点数精度高能忠实反映真实的地形起伏。常见的格式如GeoTIFF但这类文件通常体积庞大且包含大量地理坐标信息投影、坐标系等不适合直接用于WebGL。高度图Heightmap则是一张灰度图像如PNG、JPG其中每个像素的亮度0-255或颜色通道值被映射为对应点的高度。黑色0通常代表最低点白色255代表最高点。它的优势是格式通用、易于传输和GPU读取是WebGL/Three.js生态中的标准输入格式。注意高度图是DEM的一种可视化或简化表现形式。将高精度的DEM数据归一化并渲染成一张灰度图就得到了高度图。这个过程本身就有学问比如如何选择高程范围以避免地形被“压扁”或“拉伸”。2.2 实战数据获取与预处理流程假设我们的目标是渲染北京西山地区的一片地形。我不会直接给你一个高度图文件而是展示从零开始的完整链路因为数据源的差异会导致后续步骤完全不同。路径一使用公开的SRTM或ASTER GDEM数据美国航天局NASA的SRTM和ASTER GDEM数据是免费且覆盖全球的。你可以从USGS EarthExplorer等平台下载指定区域的GeoTIFF文件。接下来是关键的处理步骤数据裁剪与重投影下载的TIFF文件可能覆盖区域过大且是特定的地理坐标系如WGS84。你需要使用QGIS或GDAL命令行工具将其裁剪到目标范围并可能转换为更适合的投影对于小范围直接使用WGS84的经纬度作为XY坐标也可以但需注意单位换算。# 使用GDAL进行裁剪和格式转换示例非必须但了解流程有益 # gdalwarp -te 116.0 39.8 116.2 40.0 input.tif output_cropped.tif # gdal_translate -of PNG -scale 0 1000 0 255 output_cropped.tif heightmap.png这里-scale参数至关重要它将原始高程值例如0-1000米线性映射到0-255的像素亮度范围。你需要根据实际地形的高差来调整这个范围否则地形会失去细节或显得不自然。导出为Web友好格式将处理后的DEM导出为一张PNG格式的高度图。分辨率如1024x1024将直接决定生成几何体的顶点数量需要在细节和性能间权衡。路径二使用程序化或美术生成的高度图如果你不需要真实地理数据只是想快速创建一个看起来“真实”的山地场景那么像World Machine、Gaea这类专业地形软件甚至Photoshop的滤镜都可以生成漂亮的高度图。这时你关注的重点是法线贴图的生成和纹理的融合我们会在后面详细讨论。路径三使用在线的地形数据服务对于快速原型或特定区域像https://tangrams.github.io/heightmapper/这样的在线工具非常方便它允许你框选地图区域并直接导出高度图。这是入门最快的方式。无论哪种路径最终你手头应该有一张heightmap.png。在进入代码之前还有最后一个预处理建议使用图像编辑软件检查你的高度图。打开Photoshop或GIMP观察其直方图。理想情况下像素值应分布在整个0-255范围如果大量像素堆积在中间灰度说明地形高差不足视觉效果会显得平坦。你可以用“色阶”或“曲线”工具进行轻微调整以增强对比度但这会改变真实数据需谨慎。3. 核心构建从高度图到Three.js几何体有了高度图我们就可以在Three.js中创建地形几何体了。这里有几个关键的实现方案各有优劣。3.1 方案A使用PlaneGeometry与高度图采样最常用这是最经典、最灵活的方法。其核心思想是先创建一个具有大量细分段数的平面网格然后根据高度图中每个像素的值去抬升对应顶点的Y坐标。import * as THREE from three; import { TextureLoader } from three; // 1. 创建细分平面 const width 100; // 地形在XZ平面的宽度 const height 100; // 地形在XZ平面的深度 const widthSegments 255; // 细分段数通常比高度图尺寸小1 const heightSegments 255; const geometry new THREE.PlaneGeometry(width, height, widthSegments, heightSegments); geometry.rotateX(-Math.PI / 2); // 让平面“站起来”变成XZ平面Y轴向上 // 2. 加载高度图纹理 const textureLoader new THREE.TextureLoader(); const heightMapTexture textureLoader.load(path/to/heightmap.png); // 关键必须等待纹理加载完成才能处理顶点 heightMapTexture.onLoad () { // 3. 获取纹理的像素数据 // 注意在浏览器中直接读取纹理像素数据比较麻烦通常需要借助Canvas或预处理的数组。 // 更常见的做法是在将高度图作为纹理加载之前已经通过Image对象或Ajax获取了其像素数据数组。 // 这里假设我们有一个名为 heightData 的Uint8Array尺寸为256x256已在纹理加载前准备好。 processVertices(geometry, heightData, widthSegments 1, heightSegments 1); }; function processVertices(geometry, heightData, dataWidth, dataHeight) { const vertices geometry.attributes.position.array; const scaleY 10; // 高度缩放系数控制山脉的陡峭程度 for (let i 0; i vertices.length; i 3) { // vertices[i]是x, vertices[i1]是y初始为0, vertices[i2]是z const vertexIndex i / 3; const xPercent (vertices[i] / width 0.5); // 从[-w/2, w/2]映射到[0, 1] const zPercent (vertices[i2] / height 0.5); // 从[-h/2, h/2]映射到[0, 1] // 根据顶点在平面上的比例找到高度图中对应的像素索引 const pixelX Math.floor(xPercent * (dataWidth - 1)); const pixelY Math.floor(zPercent * (dataHeight - 1)); const pixelIndex (pixelY * dataWidth pixelX) * 4; // RGBA格式每像素4字节 // 获取红色通道值作为高度灰度图RGB const heightValue heightData[pixelIndex] / 255; // 归一化到[0, 1] // 修改顶点的Y坐标 vertices[i 1] heightValue * scaleY; } // 4. 至关重要更新法线和边界框 geometry.attributes.position.needsUpdate true; geometry.computeVertexNormals(); // 重新计算法线光照效果才正确 geometry.computeBoundingBox(); geometry.computeBoundingSphere(); }为什么必须computeVertexNormals平面在创建时所有顶点法线都指向正上方。当你大幅度抬升某些顶点后相邻面的朝向发生了剧烈变化。如果不重新计算法线光照会完全错误地形看起来会像一块平整的、打了凹凸贴图的布而不是有立体感的山脉。这个计算虽然消耗性能但必不可少。3.2 方案B使用BufferGeometry与顶点着色器高性能当你的地形网格非常密集比如512x512或更高时CPU端逐顶点修改position.array并计算法线可能会造成卡顿。更高级的做法是将高度图作为纹理传入着色器在GPU端实时计算顶点位移。这是性能最优的方案也为实现动态地形如海浪、侵蚀模拟打开了大门。其核心是创建一个ShaderMaterial在顶点着色器Vertex Shader中读取高度图纹理并据此改变gl_Position。// 顶点着色器代码 (GLSL) const vertexShader uniform sampler2D heightMap; uniform float uHeightScale; uniform float uWidth; uniform float uHeight; varying vec2 vUv; varying float vElevation; void main() { vUv uv; // 从高度图纹理采样r通道存储高度信息 vec4 heightColor texture2D(heightMap, uv); float elevation heightColor.r * uHeightScale; vElevation elevation; // 在本地坐标的y轴方向进行位移 vec3 displacedPosition position normal * elevation; gl_Position projectionMatrix * modelViewMatrix * vec4(displacedPosition, 1.0); } ; // 片元着色器代码 (GLSL) - 可以根据高程着色 const fragmentShader varying vec2 vUv; varying float vElevation; void main() { // 简单的高程着色低处绿色高处白色/灰色 vec3 color mix(vec3(0.0, 0.3, 0.0), vec3(0.8, 0.8, 0.8), vElevation); gl_FragColor vec4(color, 1.0); } ; // 在Three.js中创建材质 const terrainMaterial new THREE.ShaderMaterial({ uniforms: { heightMap: { value: heightMapTexture }, uHeightScale: { value: 15.0 }, uWidth: { value: 100 }, uHeight: { value: 100 } }, vertexShader: vertexShader, fragmentShader: fragmentShader, wireframe: false // 设为true可以查看网格结构 }); // 几何体仍然是一个细分平面但位置数据保持不变 const geometry new THREE.PlaneGeometry(100, 100, 256, 256); geometry.rotateX(-Math.PI / 2); const terrainMesh new THREE.Mesh(geometry, terrainMaterial); scene.add(terrainMesh);这个方案的优势性能所有顶点位移计算在GPU上并行完成效率极高。动态性只需更新uniform变量如uHeightScale或另一张高度图纹理地形就能实时变化无需更新CPU端的几何体数据。灵活性着色器里可以做任何事比如基于高度混合多种纹理、模拟雪线、实现视差映射增加细节等。一个关键的坑法线计算。在着色器里动态位移后CPU端的法线信息是错的。为了获得正确的光照你有两个选择在片元着色器中动态计算法线通过采样高度图相邻像素用差分法计算当前点的法线向量。这精度高但计算量稍大。// 在片元着色器中添加 uniform float uTexelSize; // 1.0 / textureSize varying vec2 vUv; uniform sampler2D heightMap; uniform float uHeightScale; vec3 calculateNormal(vec2 uv) { float left texture2D(heightMap, uv - vec2(uTexelSize, 0.0)).r * uHeightScale; float right texture2D(heightMap, uv vec2(uTexelSize, 0.0)).r * uHeightScale; float bottom texture2D(heightMap, uv - vec2(0.0, uTexelSize)).r * uHeightScale; float top texture2D(heightMap, uv vec2(0.0, uTexelSize)).r * uHeightScale; vec3 dx vec3(2.0 * uTexelSize * uWidth, right - left, 0.0); vec3 dy vec3(0.0, top - bottom, 2.0 * uTexelSize * uHeight); return normalize(cross(dx, dy)); // 注意叉乘顺序确保法线朝上 }使用THREE.MeshNormalMaterial或生成法线贴图前者直接可视化法线后者是更常见的做法——预计算一张法线贴图Normal Map在着色器中采样它来获取法线信息而不是动态计算。这能极大提升性能。3.3 方案C使用现成的扩展或库如果你追求开发速度可以考虑一些社区库比如three-terrain。但根据我的经验直接使用黑盒库虽然快但遇到定制化需求比如特殊的数据格式、独特的着色效果、性能瓶颈时调试和理解成本反而更高。掌握了上述两种核心方案你就能应对绝大多数情况并且拥有完全的掌控力。4. 赋予生命纹理、光照与细节增强一个只有单一颜色的地形是枯燥的。真实感来自于丰富的表面细节和恰当的光照反应。4.1 多纹理混合与三平面映射真实的地表有岩石、草地、砂土、积雪它们随海拔和坡度分布。实现这一效果的经典技术是多纹理混合Multi-texture Blending。步骤1准备基础纹理准备四张或更多无缝平铺Tiling的纹理贴图例如grass.jpg,rock.jpg,dirt.jpg,snow.jpg。每张纹理最好附带法线贴图Normal Map和粗糙度贴图Roughness Map以增强质感。步骤2定义混合规则在片元着色器中根据当前片元的信息通常是高程vElevation和法线normal的Y分量或坡度来决定各纹理的混合权重。// 在片元着色器中 uniform sampler2D grassTexture; uniform sampler2D rockTexture; uniform sampler2D snowTexture; varying float vElevation; varying vec3 vNormal; void main() { vec3 grassColor texture2D(grassTexture, vUv * 20.0).rgb; // 平铺20次 vec3 rockColor texture2D(rockTexture, vUv * 30.0).rgb; vec3 snowColor texture2D(snowTexture, vUv * 15.0).rgb; // 基于高程的混合权重 float grassWeight 1.0 - smoothstep(0.3, 0.5, vElevation); float rockWeight smoothstep(0.3, 0.5, vElevation) - smoothstep(0.6, 0.8, vElevation); float snowWeight smoothstep(0.6, 0.8, vElevation); // 基于坡度的修正陡峭处更多岩石 float slope 1.0 - vNormal.y; // vNormal.y接近1表示平坦接近0表示陡峭 rockWeight max(rockWeight, slope * 0.7); grassWeight grassWeight * (1.0 - slope); // 归一化权重确保总和为1 float total grassWeight rockWeight snowWeight; grassWeight / total; rockWeight / total; snowWeight / total; vec3 finalColor grassColor * grassWeight rockColor * rockWeight snowColor * snowWeight; gl_FragColor vec4(finalColor, 1.0); }步骤3解决陡坡纹理拉伸问题——三平面映射上述代码在陡峭的悬崖上会出现纹理被严重拉伸的问题因为UV是基于水平投影的。三平面映射Tri-planar Mapping是解决这个问题的银弹。它的原理是在世界空间的X、Y、Z三个方向上分别投影纹理然后根据法线方向混合这三个投影结果。vec3 triplanarBlend pow(abs(vWorldNormal), vec3(4.0)); // 4.0是混合锐度因子 triplanarBlend triplanarBlend / (triplanarBlend.x triplanarBlend.y triplanarBlend.z); // 分别计算三个平面的纹理坐标 vec3 xAxis texture2D(rockTexture, worldPos.yz).rgb; vec3 yAxis texture2D(rockTexture, worldPos.xz).rgb; vec3 zAxis texture2D(rockTexture, worldPos.xy).rgb; // 按法线方向混合 vec3 texColor xAxis * triplanarBlend.x yAxis * triplanarBlend.y zAxis * triplanarBlend.z;将多纹理混合的规则与三平面映射结合你就能得到在任意角度都纹理细节清晰、分布合理的地形表面。这是我强烈推荐的做法虽然着色器代码会复杂一些但视觉效果提升是质的飞跃。4.2 光照与阴影的优化策略地形通常是一个巨大的网格直接对其计算实时阴影THREE.DirectionalLightShadow开销巨大。这里有几个实战策略使用烘焙光照贴图Lightmap对于静态光源如太阳可以预先在3D软件如Blender或使用Three.js的LightMap功能烘焙阴影到一张纹理上。这能提供高质量的静态阴影且运行时零成本。降低阴影贴图分辨率与范围如果必须用实时阴影务必为定向光DirectionalLight的阴影相机shadow.camera设置紧贴地形的边界left,right,top,bottom,near,far。避免让阴影相机渲染整个场景只渲染地形所在的区域。同时将shadow.mapSize设置为合理值如1024x1024不是越大越好。考虑屏幕空间阴影Screen-Space Shadows或距离场阴影DF Shadows对于超大地形这些基于后处理或预计算的阴影技术可能是更好的选择但它们实现更复杂。4.3 环境遮蔽与细节法线环境光遮蔽AO可以在建模阶段烘焙一张AO贴图用于在缝隙、凹陷处添加自然的阴影大幅增强体积感。细节法线贴图基础网格的法线可能比较平滑。叠加一张高频的细节法线贴图Detail Normal Map可以在不增加顶点数的前提下为岩石表面、草地等增加丰富的微观几何错觉让表面在近处观看时也不显单调。5. 性能攻坚LOD与视锥裁剪一个1000x1000顶点的地形网格在远处看和近处看所需的细节程度是天差地别的。在远处用全精度网格是巨大的性能浪费。这就是层次细节Level of Detail, LOD技术要解决的问题。5.1 实现基于距离的网格LODThree.js自带THREE.LOD对象但对于地形这种规则网格更高效的做法是准备多个不同细分级别的PlaneGeometry例如高模 256x256中模 128x128低模 64x64然后根据相机距离切换。const highResGeometry new THREE.PlaneGeometry(100, 100, 255, 255); const midResGeometry new THREE.PlaneGeometry(100, 100, 127, 127); const lowResGeometry new THREE.PlaneGeometry(100, 100, 63, 63); // ... 对每个geometry应用相同的高度图位移处理 ... const lod new THREE.LOD(); lod.addLevel(new THREE.Mesh(highResGeometry, material), 0); // 0米内使用高模 lod.addLevel(new THREE.Mesh(midResGeometry, material), 50); // 50米外切换中模 lod.addLevel(new THREE.Mesh(lowResGeometry, material), 200); // 200米外切换低模 scene.add(lod); // 在渲染循环中更新LODThree.js r125版本需要手动更新 function animate() { lod.update(camera); // ... 其他渲染逻辑 }重要提醒直接切换整个几何体会导致明显的“跳变”Popping。更高级的做法是使用几何变形镶嵌Geometric Mipmapping或分块LODChunked LOD在着色器中实现顶点之间的平滑过渡但这超出了基础教程的范围。对于大多数情况分块离散LOD已经能带来显著的性能提升。5.2 分块Chunking渲染与视锥裁剪将整个大地形分割成多个小块Chunk例如16x16块。每个块是一个独立的Mesh。这样做有两大好处视锥裁剪Frustum CullingThree.js的渲染器会自动检查每个Mesh的包围球BoundingSphere是否在相机视锥体内不在的就不渲染。分块后远处或视线外的地形块会被完全剔除大幅减少绘制调用Draw Calls和顶点处理量。独立LOD可以为每个地形块独立设置LOD级别。靠近相机的块用高模远离的用低模。实现分块需要一些额外的逻辑来计算每个块对应的高度图数据区域并为其创建独立的几何体和网格。这是构建大型无缝世界的标准做法。5.3 其他性能贴士合并几何体对于使用相同材质的多个低细节层级地形块可以考虑使用BufferGeometryUtils.mergeBufferGeometries进行静态合并以减少Draw Calls。但合并后无法进行独立的视锥裁剪需权衡。避免每帧更新顶点数据除非是做动态地形否则位移和法线计算应在初始化时完成。确保在渲染循环中不要调用geometry.attributes.position.needsUpdate true。使用MeshBasicMaterial或自定义简单着色器进行深度预渲染Depth Pre-pass在复杂场景中可以先用地形的简化材质只写深度不计算复杂光照渲染一遍填充深度缓冲区。后续渲染其他物体时被地形遮挡的像素可以提前跳过片元着色提升性能。6. 交互与调试让地形“活”起来6.1 实现地形高程采样与射线交互一个常见需求是当用户点击地形时如何获取点击点的精确三维坐标和高程const raycaster new THREE.Raycaster(); const mouse new THREE.Vector2(); function onMouseClick(event) { // 将鼠标坐标归一化到[-1, 1] mouse.x (event.clientX / window.innerWidth) * 2 - 1; mouse.y -(event.clientY / window.innerHeight) * 2 1; raycaster.setFromCamera(mouse, camera); // 假设terrainMesh是你的地形网格 const intersects raycaster.intersectObject(terrainMesh); if (intersects.length 0) { const point intersects[0].point; console.log(点击位置: X${point.x.toFixed(2)}, Y${point.y.toFixed(2)}, Z${point.z.toFixed(2)}); // 你可以在这里放置一个标记如一个小球到point位置 } } window.addEventListener(click, onMouseClick);6.2 在React/Vue框架中集成Three.js地形以React为例使用react-three/fiber和react-three/drei可以更声明式地构建3D场景。import { Canvas, useLoader } from react-three/fiber; import { TextureLoader } from three; import { useMemo } from react; function Terrain() { const heightMap useLoader(TextureLoader, /heightmap.png); const [geometry, material] useMemo(() { // 这里放置之前讲解的几何体创建和处理的逻辑 // 注意在React组件中需要将几何体和材质用useMemo包裹以避免重复创建 const geo new THREE.PlaneGeometry(100, 100, 255, 255); // ... process vertices with heightMap ... const mat new THREE.MeshStandardMaterial({ color: green }); return [geo, mat]; }, [heightMap]); // 依赖项包含heightMap return mesh geometry{geometry} material{material} rotation{[-Math.PI / 2, 0, 0]} /; } function App() { return ( Canvas ambientLight intensity{0.5} / directionalLight position{[10, 10, 5]} intensity{1} castShadow / Terrain / OrbitControls / {/* 来自 react-three/drei方便相机控制 */} /Canvas ); }在框架中集成的关键点资源管理使用useLoader加载纹理框架会帮你处理缓存和清理。性能将几何体和材质的创建包裹在useMemo中防止每次渲染都重新创建。交互使用react-three/drei中的useCursor、useIntersect等hooks可以轻松实现悬停、点击效果。调试react-three/drei提供了Stats /组件显示性能指标TransformControls /用于可视化的对象变换这对调试地形位置和缩放非常有帮助。6.3 调试技巧让问题可视化显示法线将材质临时切换为THREE.MeshNormalMaterial可以直观检查法线计算是否正确应该是平滑的彩色渐变如果出现杂乱色块则法线有误。显示线框设置material.wireframe true可以看清网格的密度和分布。显示顶点创建一个THREE.Points对象使用地形几何体的顶点属性可以将所有顶点渲染为点云检查高度位移是否应用成功。GUI调试使用lil-gui或dat.GUI创建控制面板实时调整高度缩放系数scaleY、光照参数、纹理混合权重等能极大提高调试效率。7. 从原理到实践一个完整的、可交互的示例框架为了将以上所有知识点串联起来我设计了一个简单的、模块化的示例框架思路。你可以基于此进行扩展。项目结构/src /assets heightmap.png grass.jpg, rock.jpg, snow.jpg /js TerrainManager.js // 地形核心逻辑数据加载、几何体生成、LOD管理 ShaderManager.js // 着色器编写与材质管理 InteractionManager.js // 射线交互、拾取 main.js // 主入口初始化场景、相机、渲染循环 index.htmlTerrainManager.js核心片段export class TerrainManager { constructor(scene, options) { this.scene scene; this.options { width: 100, height: 100, segments: 256, heightScale: 20, ...options }; this.chunks []; // 存储所有地形块 this.heightData null; } async init() { // 1. 加载并解析高度图数据 this.heightData await this.loadHeightmap(assets/heightmap.png); // 2. 创建分块地形 const chunkSize this.options.width / 4; // 假设分成4x4块 for (let x 0; x 4; x) { for (let z 0; z 4; z) { const chunk this.createChunk(x, z, chunkSize); this.chunks.push(chunk); this.scene.add(chunk.mesh); } } // 3. 初始化LOD和视锥裁剪简化版实际需在渲染循环更新 console.log(Terrain loaded with, this.chunks.length, chunks.); } createChunk(gridX, gridZ, size) { // 计算该块对应的顶点数据范围 const startX gridX * (this.options.segments / 4); const startZ gridZ * (this.options.segments / 4); // 创建几何体并应用高度位移基于this.heightData的子集 const geometry new THREE.PlaneGeometry(size, size, this.options.segments/4, this.options.segments/4); geometry.rotateX(-Math.PI / 2); geometry.translate(gridX * size - this.options.width/2 size/2, 0, gridZ * size - this.options.height/2 size/2); // ... 应用高度位移的代码参考第3.1节... // 创建材质可以是ShaderMaterial const material new THREE.MeshStandardMaterial({ color: 0x88aa44, flatShading: false }); const mesh new THREE.Mesh(geometry, material); mesh.castShadow true; mesh.receiveShadow true; return { mesh, gridX, gridZ }; } // ... 其他方法loadHeightmap, updateLOD 等 ... }在main.js中你只需要初始化TerrainManager并在渲染循环中调用可能的更新方法如LOD更新。将交互逻辑放在InteractionManager中。这种分离让代码更清晰也便于你单独优化或替换某个模块比如将CPU位移改为GPU着色器位移。走到这里你已经掌握了在Three.js中从零构建真实地形的完整技术栈。从数据准备、几何体生成、着色器优化、性能调优到交互集成每一个环节都有其门道和陷阱。我分享的这些经验很多都是经过项目验证、踩过坑后总结出来的。记住地形的逼真度是“数据精度”、“几何细节”、“表面材质”和“光照交互”共同作用的结果需要根据你的项目需求是精细的飞行模拟还是广阔的战略地图来权衡和调整。最有效的学习方式就是动手将上面的代码片段组合起来看着一片数字山脉在自己的浏览器中拔地而起那时你会对每一个参数和每一行代码有更深的理解。 RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
