经纬志
首页 / three.js / 使用示例

LOD 分级

同一座山体做了三档:细分五级、二级、零级。相机拉近自动换高模,推远换低模, 左上角实时显示当前层级、三角形数与相机距离。

three.js 0.160.0 · 更新 2026-10-28
源码与运行效果
运行效果

距离如何决定层级

addLevel(object, distance, hysteresis) 里,第二个参数是该层开始生效的距离, 第三个参数是一段缓冲带。相机距离在阈值附近轻微抖动时, 缓冲带能防止两层之间反复横跳,这在缓慢缩放时特别明显。

示例的三档阈值是 0、34、62。近处用细分五级、约两万个三角形; 中景降到二级、三百二十个面;远景只有二十个面,轮廓仍能认出来。

层级细分三角形生效距离
高精度5约 204800 起
中精度232034 起
低精度08062 起

手动锁定层级

关掉 autoUpdate 之后,LOD 不再根据距离调整子对象可见性, 直接设置某一层 visible 就能固定显示。 调试图层、截取对比图、排查某个层级的面数问题时,这个开关很好用。

阈值要按屏幕占比定,不是按绝对距离。同一份 LOD 配置在高分辨率大屏上, 低模出现得太早会露馅。稳妥的做法是按「包围球投影到屏幕上的像素直径」换算距离, 再随窗口尺寸变化重算阈值。