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
6

Hi are there any news on this topic?
thanks a lot!

7

Hi! Nothing to report yet, will be included in 9.0 release and can share when work begins! In meantime focusing on enabling LargeWorldRendering (to support scenes with enormous coordinate systems like in a 3D tile loaded scene) as well as a camera to support navigating globe

8

Hello, when is the expected release date for 9.0?

9

end of march :slight_smile: