How to load data in the b3dm or 3D Tiles format?

Questions
1

How to load data in the b3dm or 3D Tiles format?

3 
import * as BABYLON from '@babylonjs/core/Legacy/legacy'
import { load, registerLoaders } from '@loaders.gl/core';
import { Tiles3DLoader, CesiumIonLoader } from '@loaders.gl/3d-tiles';
import { Tileset3D } from '@loaders.gl/tiles';
import "@babylonjs/loaders/glTF";
class Core {
    canvas
    num = 0
    constructor(canvas, option) {
        this.canvas = canvas
    }


    async init() {

        const engine = new BABYLON.Engine(this.canvas);
        this.engine = engine
        let scene = new BABYLON.Scene(engine);
        this.scene = scene


        scene.createDefaultCameraOrLight(true, true, true);
        scene.lights[0].intensity = 1
        scene.lights[0].diffuse = new BABYLON.Color3(0.9, 0.9, 0.7)

        window.addEventListener("click", (e) => {
            console.log(e)
            var pickResult = scene.pick(e.x, e.y);
            if (pickResult.hit) {
                // pickResult.pickedMesh.material.zOffset-=-1
                console.log(pickResult)
                // pickResult.pickedSprite.angle += 0.5;
            }
        })




        let defaultCamera = scene.getCameraByName("default camera")
        defaultCamera.mapPanning = true

        // defaultCamera.inertia=0
        defaultCamera.zoomToMouseLocation = true
        defaultCamera.wheelDeltaPercentage = 0.1
        defaultCamera.panningSensibility = 20
        defaultCamera.beta = Math.PI / 4
        defaultCamera.radius = 1000
        defaultCamera.maxZ = 5000
        defaultCamera.minZ = 0
        this.loadModel()
        console.log(scene)
        engine.runRenderLoop(() => {
            scene.render();
        });
    }
    async loadModel() {
        const tileUrl = '/tiles/tileset.json';
        const tilesetJson = await load(tileUrl, Tiles3DLoader);
        const tileset3d = new Tileset3D(tilesetJson, {
            // onTileLoad: tile => console.log(tile, 99)
        });
        const loaderTiles = async (modelList) => {
            if (Array.isArray(modelList)) {
                for (let item of modelList) {
                    if (item?.contentUrl) {
                        let tiles = await load(item.contentUrl, Tiles3DLoader, { decompress: true, gltf: { postProcess: false, decompressMeshes: false }, })
                        if (tiles.type === "cmpt") {
                            for (let t of tiles.tiles) {
                                await this.loadGltf(t.gltf)
                            }
                        } else if (tiles.type === "b3dm") {
                            await this.loadGltf(tiles.gltf)
                        }
  // b3dm i3dm cmpt.........


                    }
                    if (Array.isArray(item?.children)) {
                        loaderTiles(item?.children)
                    }
                }
            }

        }

        loaderTiles(tileset3d.root.children)

    }
    async loadGltf(gltf) {
        try {
            const file = new File([gltf.buffers[0].arrayBuffer], "file.glb");
            await BABYLON.SceneLoader.AppendAsync("file:", file, this.scene, (e) => { }, ".glb")
            this.engine.hideLoadingUI()
        } catch (error) {
            console.log(error)
        }

    }
}
export default Core
2 Likes
4

cc @georgie

1 Like
5

@keenliu @dalidaliW we will also be working on a Babylon add-on for loading 3d tiles, avoiding external dependency like @loaders.gl/3d-tiles - npm … stay tuned!

1 Like