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

实例化散布

六千棵树散布在一片起伏地形上,按同一套高程函数落位,所以树根都贴着地面。 显示数量可从五百调到六千,重新分布会打乱位置与尺寸。

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

落位靠同一套高程函数

地形网格与树的 Y 坐标都来自 heightAt(x, z), 因此不需要射线求交就能把树放到地面上。 真实场景里地形是 DEM 栅格,树的位置同样用双线性插值从栅格取值, 比每棵树打一条射线快几个数量级。

散布采用极坐标:角度均匀、半径按幂函数压缩,于是中心密、外缘稀。 每棵树再乘上 0.65 到 1.8 的随机缩放与随机朝向,重复感会弱很多。

项取值说明
实例上限6000缓冲区按上限分配一次
几何体七边圆锥面数少,远景轮廓仍清晰
数量调整mesh.count不重建缓冲,直接截断
颜色实例色按黄绿区间微调

数量滑杆为什么这么快

实例化的对象有个 count 属性,决定这次绘制取前多少个实例。 把它从六千改到五百,只是换了一个数值,缓冲、矩阵、颜色全部原样保留。 制造业、林业类项目常用这个手法做「按缩放级别抽稀」。

树冠用圆锥会穿帮吗。远景没问题,近景会露出七个侧面。 补齐的办法是再叠一层更细的树冠实例,按距离用 LOD 切换, 而不是把单个几何体的分段数一路调高。