贴地模型组

建筑物、树木等模型要放在地面上，需要传入模型所在地面海拔高度才能准确贴地，但不同层级地形瓦片的几何误差不同，同一位置的高度在不同层级高度不同，所以需要根据模型所在位置动态调整贴地高度，这个计算比较繁琐。为了简化贴地操作，three-tile 提供 GroundGroup 插件，它继承 threejs 的 Group 对象，只要将模型、精灵等加入 GroundGroup，就能够自动贴地。上面示例中，你可以看到不同缩放级别下，同样位置的树木的海拔高度不同。

下面的代码以 sprite 方式，随机向地面添加 500 棵树：

// 创建贴地模型组
const groundGroup = new plugin.GroundGroup(map);
map.add(groundGroup);

// 树木精灵材质
const SpriteMaterial = new THREE.SpriteMaterial({
    map: new THREE.TextureLoader().load("../images/tree1.webp"),
    color: 0x777777,
    transparent: true,
});

// 随机添加500棵树
for (let i = 0; i < 500; i++) {
    const icon = new THREE.Sprite(SpriteMaterial);
    icon.renderOrder = 999;
    icon.center.set(0.5, 0);
    icon.scale.setScalar(30);

    const lon = centerGeo.x + (Math.random() - 0.5) * 0.005;
    const lat = centerGeo.y + (Math.random() - 0.5) * 0.005;
    const position = map.geo2map(new THREE.Vector3(lon, lat));
    icon.position.copy(position);
    groundGroup.add(icon);
}

TIP

GroundGroup 内部其实还是使用射线法对地形进行采样，贴地模型数量太多会影响运行效率。

TIP

当加载大量贴地模型时，如果你关注的区域地形变化不是很大，建议代码中指定模型的海拔高度。在上面示例中，待地图加载完毕，点击"显示贴地模型位置"，可以查看所有贴地模型的经纬度和海拔高度，运行时直接使用这些位置以加快运行速度。在地形起伏比较大时，由于不同级别瓦片几何误差不同，固定海拔高度可能贴地不准确，还是需要使用 GroundGroup 方式，实时采样地形高度调整模型贴地。

TIP

当然，你也可以使用 添加广告牌 方式，使用鼠标把树一颗一颗点上去，然后保存树的经纬度和海拔高度，再加载。

贴地模型组 ​

贴地模型组