mapbox-threejs

---

集成 mapbox-gl 与 threejs 实现在地圖上渲染 3dtiles 、3DGS、gltf 模型等功能。

🧐 背景介绍

最初考慮在 threejs 中渲染 3dtiles，以替換 mapbox-gl + deck.gl 的解決方案。 後來發現 threejs 上還可以做更多功能，例如 3DGS 模型、gltf 模型等。

因此，決定將 mapbox-gl 與 threejs 整合，以提供更強大的渲染功能。

🔧 功能說明

1. 支持將 threejs 和 mapbox 集成，相機同步等
2. 支持在 threejs 中渲染 3dtiles、3DGS、gltf 模型等，座標對位
3. v1.0.0 更新：支持在 threejs 和 mapbox 中進行第三人稱視角下的操作，如無人機或角色控制，效果参考以下示例视频
4. v1.0.0 更新：支持将 3DGS 数据切片成 3dtiles 数据，并使用 tileset 方式加载，效果参考以下示例视频。工具参考 https://github.com/yangjs6/splat-3dtiles
5. v1.1.0 更新：支持各类 mesh/object 创建，包括点、线、面、体的可视化，如建筑、道路、地理围栏等

更多功能已經實現，但未開源，請期待！

🚀 示例圖集

更多示例项目，后续将会在专门的开源库中分享： https://github.com/yangjs6/mapbox-3d-tiles-demos

• 加载各类 mesh 示例，点击图片，可跳转到 b 站查看相关视频。

• 加载大范围 tileset/3dgs 对比，点击图片，可跳转到 b 站查看相关视频。

• 加载大范围 tileset，点击图片，可跳转到 b 站查看相关视频。

• 加载大范围 3dgs，点击图片，可跳转到 b 站查看相关视频。

• 加载 3dgs/gltf，使用角色控制，点击图片，可跳转到 b 站查看相关视频。

• 加载 3dgs/gltf，使用无人机控制，点击图片，可跳转到 b 站查看相关视频。

🏁 示例使用

初始化

初始化 mapbox-gl 的 map，在 map 的 load 事件中添加 ThreejsSceneLayer，并进一步添加 tileset 、 3dgs 、gltf、glb 等模型。

map.on('load', function () {
    var scene = new ThreejsSceneLayer({
        id: 'test-scene',
        refCenter: refCenter,
    });

    map.addLayer(scene);

    var tileset = scene.addTileset({
        id: 'test-tileset',
        url: tiles3DLayerUrl,
    });

    var tileset_3dgs = scene.addTileset({
        id: 'test-tileset',
        url: 'http://localhost:8804/splat-3dtiles/NNU_2_opt/tileset.json',
        isGaussianSplatting: true, // 默认为 false，如果模型有3DGS效果，请设置为 true
        maxGaussianSplatingCount: 4096 * 4096, // 当数据量大时，可调高到 8192 * 8192
    });

    scene.addModel({
        id: 'NNU_2_new',
        rootUrl: './data/splats/',
        fileNames: 'surveyhouse.splat',
        position: [118.9062412507131, 32.10569531706962],
        rotation: [-90, 0, 0],
        scale: 1,
        offset: [0, 0, -30],
    });

    scene.addModel({
        id: 'SM_Tesla',
        rootUrl: './data/meshes/',
        fileNames: 'SM_Tesla.glb',
        position: [118.91083364082562, 32.116922266350315],
        rotation: [90, 0, 0],
        scale: 1,
        offset: [-26.8, -4.2, 1.6],
    });
});

✍️ 作者说明

杨建顺