一、大地形加载崩浏览器的根因
大家做Web端3D项目时，尤其是要加载大范围山地、城市这类大地形，大概率遇到过浏览器突然灰掉、卡成PPT甚至闪退的情况，核心原因是：你把一整个超大数据量的地形资源一次性塞给浏览器扛了——浏览器的GPU和内存资源有限，这种“一口吃成胖子”的操作直接超出了承载上限，自然会崩。今天就用Three.js的两个成熟方案解决这个坑，不用复杂的专业术语，人人都能看懂。
二、Three.js里用LOD解决“卡崩”的具体做法
2.1 先搞懂LOD是什么
其实就是利用人眼的视觉特性：看远处的东西不需要清晰细节，只要轮廓就行；近处才需要精准细节。LOD（Level of Detail，多细节层级）就是给同一个地形做几个不同精度的“分身”：离你远时用低配版（顶点少、面数少，数据量小），离你近时自动切换成高配版，既保效果又省资源。
2.2 写个极简的LOD示例（技术栈：Three.js v0.158）
// 基础场景初始化，这是Three.js的标准写法，不用纠结每一行是什么，知道是搭环境就行
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建LOD对象：核心，用来切换不同精度的地形
const terrainLod = new THREE.LOD();
// 第一层：最远的低精度地形，500单位距离以上时显示（比如你站在1000米外看山）
const lowGeo = new THREE.PlaneGeometry(100,100, 5,5); // 只有5行5列=25个顶点，极糊
const lowMat = new THREE.MeshBasicMaterial({color: 0x88cc88});
const lowMesh = new THREE.Mesh(lowGeo, lowMat);
terrainLod.addLevel(lowMesh, 500); // 距离相机>=500时显示这个
// 第二层：中间距离的中等精度，200-500单位之间显示（站在100-500米看山）
const midGeo = new THREE.PlaneGeometry(100,100, 15,15); // 225个顶点，比上一层清晰
const midMat = new THREE.MeshBasicMaterial({color: 0x66aa66});
const midMesh = new THREE.Mesh(midGeo, midMat);
terrainLod.addLevel(midMesh, 200); // 距离>=200时自动替换
// 第三层：最近的高精度，0-200单位显示（你离山很近时）
const highGeo = new THREE.PlaneGeometry(100,100, 50,50); //2500个顶点，细节最多
const highMat = new THREE.MeshBasicMaterial({color: 0x448844});
const highMesh = new THREE.Mesh(highGeo, highMat);
terrainLod.addLevel(highMesh, 0); // 所有更近的距离都用这个
// 把LOD地形加到场景，调整相机位置方便演示切换效果
scene.add(terrainLod);
camera.position.z = 550; // 初始放在550米外，现在看到的是低精度地形
// 渲染循环，让相机慢慢移动，看LOD切换的效果
function animate(){
requestAnimationFrame(animate);
camera.position.z -= 0.8; // 相机慢慢往前移动，逐渐靠近地形
renderer.render(scene, camera);
}
animate();
三、瓦片调度策略：给地形做“拆装箱”
3.1 瓦片的核心思路
如果把大地形比成100箱大货，一次性搬100箱肯定累，拆成10次每次搬10箱就轻松。同理，把1000x1000的大地形，切成10x10的小方块（每个100x100大小），每次只加载用户视野附近的3x3个小方块，远处的不用管，这样每次加载的数据量极小，浏览器绝对扛得住。
3.2 瓦片调度的关键逻辑
核心是“按需加载+及时卸载”：
- 实时监听相机的位置，算出来用户现在在哪个小方块（瓦片）里；
- 只加载当前瓦片周围2-3个的瓦片，保证用户移动时不会看到空白；
- 把离当前位置超过5个方块的瓦片删掉，释放内存，避免越积越多。
3.3 瓦片加载的示例代码（技术栈：Three.js v0.158）
// 全局配置：大地形拆成10x10的瓦片，每个100x100大小
const tileSize = 100;
const tileCount = 10; // 总瓦片数10*10=100，对应1000x1000大地形
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
renderer.setSize(window.innerWidth, window.innerHeight);
// 瓦片管理：存已加载的瓦片，避免重复加载
const loadedTiles = new Set();
// 所有瓦片的父容器，统一管理，方便批量操作
const tileParent = new THREE.Group();
scene.add(tileParent);
// 根据相机位置更新瓦片：核心逻辑
function updateTiles(cameraPos){
// 计算当前相机在哪个瓦片坐标（比如x=250，tileSize=100，就是x=2）
const currentTileX = Math.floor((cameraPos.x + tileCount*tileSize/2)/tileSize);
const currentTileZ = Math.floor((cameraPos.z + tileCount*tileSize/2)/tileSize); // 地形是xz平面
// 加载当前周围2个范围内的瓦片，保证无空白
for(let dx = -2; dx <=2; dx++){
for(let dz = -2; dz <=2; dz++){
const x = currentTileX + dx;
const z = currentTileZ + dz;
// 确保坐标在合法范围（0到9，因为10个瓦片）
if(x >=0 && x < tileCount && z >=0 && z < tileCount){
const tileKey = `${x},${z}`;
if(!loadedTiles.has(tileKey)){
loadTile(x,z, tileKey);
loadedTiles.add(tileKey);
}
}
}
}
// 卸载离当前位置超过5个的瓦片，释放内存
for(const key of loadedTiles){
const [x,z] = key.split(',').map(Number);
if(Math.abs(x - currentTileX) >5 || Math.abs(z - currentTileZ) >5){
unloadTile(key);
}
}
}
// 加载单个瓦片：简化版，实际项目中会加载对应地形数据
function loadTile(x,z, key){
const geo = new THREE.PlaneGeometry(tileSize, tileSize, 10,10);
const mat = new THREE.MeshStandardMaterial({color: 0x557755});
const tile = new THREE.Mesh(geo, mat);
// 调整瓦片位置，让整个地形居中
tile.position.set((x - tileCount/2)*tileSize, 0, (z - tileCount/2)*tileSize);
tile.userData.key = key; // 存标识，方便卸载时找
tileParent.add(tile);
}
// 卸载瓦片：移除并释放资源
function unloadTile(key){
const tile = tileParent.children.find(t => t.userData.key === key);
if(tile) tileParent.remove(tile);
loadedTiles.delete(key);
}
// 渲染循环：每帧更新瓦片
function animate(){
requestAnimationFrame(animate);
updateTiles(camera.position);
renderer.render(scene, camera);
}
animate();
四、这套方案的好与坏
4.1 优点
最核心的是浏览器绝对不会崩，因为每次处理的数据量都极小，内存和GPU压力稳定；其次是渲染流畅，用户移动时不会有卡死的情况；另外瓦片和LOD的组合，既能保证远处的视觉效果，又能节省资源，工程上的落地性很强。
4.2 缺点
首先是地形的衔接处会有轻微的不自然，比如切换LOD或瓦片时，边缘会有点模糊；其次是代码量比直接加载大很多，需要管理瓦片的加载卸载、LOD的层级，调试起来要多花功夫；最后如果用户需要近距离看地形的细节，还是会比全量加载的效果差，因为用的是低精度瓦片。
五、实操时要踩的坑
5.1 别贪心加载太多瓦片
很多人会加载周围5个以上的瓦片，结果还是占了太多内存，其实加载2-3个周围的就足够，既不会看到空白，又不会浪费资源。
5.2 LOD层级别超过3层
一般2层就够：远的低精度，近的高精度，3层也可以，但别搞4层以上，多了切换的时候会有延迟，还占资源。
5.3 瓦片和LOD要匹配
近处的瓦片必须用高精度，远处的瓦片用低精度，不然近处的瓦片细节很清晰，远处的突然变糊，中间会有断层，视觉效果会很差。
5.4 一定要做内存回收
卸载瓦片的时候，一定要把对应的几何体、材质从Three.js里删掉，不然内存会一直涨，虽然不会立刻崩，但慢慢会变卡，用户体验还是差。
六、总结：工程落地的小建议
实际项目中，先测好大地形的总尺寸，拆分出合理的瓦片大小（一般100x100到500x500都可以），然后做2层LOD，不要搞复杂的层级；瓦片的加载范围设为当前周围2个，别太大；相机移动时，不要每帧都更新瓦片，加个50ms的防抖，减少性能消耗；最后用Chrome的性能面板看内存，确保没有泄漏，这样一套方案落地下来，大地形加载的崩溃问题基本就能解决。
Comments