How can I deep fusion babylonjs and cesium?

Questions
1

I watched GitHub - Hypnosss/cesium-babylonjs this project,but it is just do some thing with camera synchronization，and it is dependence with two different dom. that I can not manipulation babylonjs meshes or any events. Is there any way or idea to deep mix this?I am very much looking forward to and grateful to someone who can answer this question！

2

3D Tiles Loaders | loaders.gl

3

Would you expand on that, and I’d like to ask you exactly how to do it

4 

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
1 Like
5

Thank you very much. I’ll try it first