# How can I deep fusion babylonjs and cesium?

**URL:** <https://forum.babylonjs.com/t/how-can-i-deep-fusion-babylonjs-and-cesium/42924>\
**Category:** Questions\
**Created:** [August 2, 2023, 2:17am UTC](https://forum.babylonjs.com/t/how-can-i-deep-fusion-babylonjs-and-cesium/42924 "2023-08-02T02:17:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![shuoshuo](https://avatars.discourse-cdn.com/v4/letter/s/9d8465/32.png) [@shuoshuo](https://forum.babylonjs.com/u/shuoshuo)\
**Post date:** [August 2, 2023, 2:17am UTC](https://forum.babylonjs.com/t/how-can-i-deep-fusion-babylonjs-and-cesium/42924/1 "2023-08-02T02:17:45Z")

</div>

I watched [GitHub - Hypnosss/cesium-babylonjs](https://github.com/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！

---

<div class="post-metadata">

**Author:** ![dalidaliW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dalidaliw/32/28108_2.png) [@dalidaliW](https://forum.babylonjs.com/u/dalidaliW)\
**Post date:** [August 2, 2023, 8:26am UTC](https://forum.babylonjs.com/t/how-can-i-deep-fusion-babylonjs-and-cesium/42924/2 "2023-08-02T08:26:17Z")

</div>

[3D Tiles Loaders | loaders.gl](https://loaders.gl/docs/specifications/category-3d-tiles)

---

<div class="post-metadata">

**Author:** ![rymond](https://avatars.discourse-cdn.com/v4/letter/r/d07c76/32.png) [@rymond](https://forum.babylonjs.com/u/rymond)\
**Post date:** [January 22, 2024, 2:14am UTC](https://forum.babylonjs.com/t/how-can-i-deep-fusion-babylonjs-and-cesium/42924/3 "2024-01-22T02:14:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dalidaliW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dalidaliw/32/28108_2.png) [@dalidaliW](https://forum.babylonjs.com/u/dalidaliW)\
**Post date:** [January 22, 2024, 2:36am UTC](https://forum.babylonjs.com/t/how-can-i-deep-fusion-babylonjs-and-cesium/42924/4 "2024-01-22T02:36:31Z")

</div>

```auto

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

```

---

<div class="post-metadata">

**Author:** ![rymond](https://avatars.discourse-cdn.com/v4/letter/r/d07c76/32.png) [@rymond](https://forum.babylonjs.com/u/rymond)\
**Post date:** [January 22, 2024, 10:04am UTC](https://forum.babylonjs.com/t/how-can-i-deep-fusion-babylonjs-and-cesium/42924/5 "2024-01-22T10:04:49Z")

</div>

Thank you very much. I’ll try it first