首页 / three.js / 使用示例
LOD 分级
同一座山体做了三档:细分五级、二级、零级。相机拉近自动换高模,推远换低模, 左上角实时显示当前层级、三角形数与相机距离。
源码与运行效果
距离如何决定层级
addLevel(object, distance, hysteresis) 里,第二个参数是该层开始生效的距离,
第三个参数是一段缓冲带。相机距离在阈值附近轻微抖动时,
缓冲带能防止两层之间反复横跳,这在缓慢缩放时特别明显。
示例的三档阈值是 0、34、62。近处用细分五级、约两万个三角形; 中景降到二级、三百二十个面;远景只有二十个面,轮廓仍能认出来。
| 层级 | 细分 | 三角形 | 生效距离 |
|---|---|---|---|
| 高精度 | 5 | 约 20480 | 0 起 |
| 中精度 | 2 | 320 | 34 起 |
| 低精度 | 0 | 80 | 62 起 |
手动锁定层级
关掉 autoUpdate 之后,LOD 不再根据距离调整子对象可见性,
直接设置某一层 visible 就能固定显示。
调试图层、截取对比图、排查某个层级的面数问题时,这个开关很好用。
阈值要按屏幕占比定,不是按绝对距离。同一份 LOD 配置在高分辨率大屏上, 低模出现得太早会露馅。稳妥的做法是按「包围球投影到屏幕上的像素直径」换算距离, 再随窗口尺寸变化重算阈值。