35. 使用 3DTilesRendererJS 加载 3DTiles

loading

使用 3DTilesRendererJS(https://github.com/NASA-AMMOS/3DTilesRendererJS) 加载 3dtiles 模型。

把 3DTilesRendererJS 的 Basic TilesRenderer 示例复制过来：

// 加载3dtiles
const load3dtiles = async (url) => {
    const tilesRenderer = new TilesRenderer(url);
    tilesRenderer.setCamera(viewer.camera);
    tilesRenderer.setResolutionFromRenderer(viewer.camera, viewer.renderer);
    tilesRenderer.addEventListener("load-tile-set", () => {
        const sphere = new THREE.Sphere();
        tilesRenderer.getBoundingSphere(sphere);
        tilesRenderer.group.position.copy(sphere.center).multiplyScalar(-1);
    });
    return tilesRenderer;
};

const tilesRenderer = await load3dtiles("https://nasa-ammos.github.io/3DTilesRendererJS/example/data/tileset.json");
helper.add(tilesRenderer.group);
viewer.addEventListener("update", (evt) => {
    tilesRenderer.update();
});

TIP

由于 three-tile 使用 EPSG:3857 投影，而常见的 3dtiles 使用 EPSG:4326 投影，叠加时 3dtiles 很难和地图套准，只能手工调整 3dtiles 的位置和缩放尽量减小误差。