BABYLONJS加载3DTiles

babylon.js是什么?

babylon.js是一个完整的JavaScript(TS)框架，用于构建HTML5，WebGL,WebGPU，WebVR和Web Audio的3D游戏和体验. 除了游戏用来在页面实现一些3D场景也是没问题的.官网

安装Babylon.js以及记载所需要的依赖需要的依赖

yarn add '@babylonjs/core' '@babylonjs/loaders' '@loaders.gl/core' '@loaders.gl/tiles' '@loaders.gl/3d-tiles' '@deck.gl/core'

构建3dtile类

import { Scene } from "@babylonjs/core";

import { load } from '@loaders.gl/core';

import { Tiles3DLoader } from '@loaders.gl/3d-tiles';

import { Tileset3D } from '@loaders.gl/tiles';

import { WebMercatorViewport } from '@deck.gl/core';

import * as BABYLON from '@babylonjs/core';

export class Parse3dtile {
  scene: Scene | undefined
  viewport: any
  tileset: any
  constructor(url: string, scene: Scene,) {
    this.viewport = {
      width: 1024, //视窗大小
      height: 1024, //视窗大小
      longitude: 121.13119041, //此处为经纬度对应3dtile所在位置才会加载!!!!!!!
      latitude: 31.43544080, //此处为经纬度对应3dtile所在位置才会加载!!!!!!!
      zoom: 22 //3dtile层级
    }
    this.loadPointTile(url, scene)
  }
  async loadPointTile(url: string, scene: Scene) {
    const content = await load(url, Tiles3DLoader, {

      '3d-tiles': {
        loadGLTF: false
      },

    });

    let a = 1;
    this.tileset = new Tileset3D(content, {
      contentLoader: async (tile) => {
        if (tile.content.gltfArrayBuffer) {

          let arrayBuffer = tile.content.gltfArrayBuffer;
          let base64 = this._arrayBufferToBase64(arrayBuffer);
          let file = new File([arrayBuffer], 'as.glb')
          BABYLON.SceneLoader.ShowLoadingScreen = false;
          BABYLON.SceneLoader.Append("", base64, scene, function () {
           
          });//可以使用base64加载模型
          // BABYLON.SceneLoader.Append("file:,", file, scene,  ()=> {
          //   if(a==1)
          //   scene.createDefaultCamera(true, true, true);
          //   this.tileset.update(new WebMercatorViewport(this.viewport))

          //   a++
          // });//或者使用file来加载模型
        }
      },
      onTileLoad: async (tile) => {

        this.tileset.update(new WebMercatorViewport(this.viewport))
      },
      onTileUnload: (tile) => {
        // unloadQueue.push(tile);
      },
      onTileError: (tile, message) => {
        console.error('Tile error', tile.id, message);
      },
      loadOptions: {
        gltf: {
          loadImages: false,
        },
        '3d-tiles': {
          loadGLTF: false
        },
      },
    });

    this.tileset.update(new WebMercatorViewport(this.viewport))
    return this.tileset;
  }
  _arrayBufferToBase64(buffer: Iterable<number>) {
    var binary = '';
    var bytes = new Uint8Array(buffer);
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
      binary += String.fromCharCode(bytes[i]);
    }
    return "data:base64," + window.btoa(binary);
  }
}

创建babylonjs场景并加载3dtile

import { Parse3dtile } from './Core/Load3dtile/Parse3dtile'
import * as BABYLON from '@babylonjs/core';
import '@babylonjs/loaders';
      var createDefaultEngine = function(canvas:HTMLCanvasElement) {
        return new BABYLON.Engine(canvas, true, {useHighPrecisionMatrix:true,useHighPrecisionFloats:true, preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: true});
      };
      
      var canvas = document.getElementById("renderCanvas"); // Get the canvas element
          var engine = createDefaultEngine(canvas as HTMLCanvasElement); // Generate the BABYLON 3D engine
          /******* 创建Scene ******/
          var createScene = function () {
      
              BABYLON.RenderingManager.MAX_RENDERINGGROUPS = 21;
              var scene = new BABYLON.Scene(engine);
              const camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, null, BABYLON.Vector3.Zero(), scene);

              camera.setTarget(BABYLON.Vector3.Zero());
              camera.minZ = 1;
              camera.maxZ = 99999;

      
      
            let light = new BABYLON.HemisphericLight("light",new BABYLON.Vector3(0,1,0),scene);
            /******* 加载3dtile ******/
            new Parse3dtile('填写3dtile地址',scene) 
            /******* 加载3dtile ******/
            
  
              return scene;
          };
          /*******  ******/
      
          var scene = createScene();
      
      
          window.addEventListener("DOMContentLoaded", ()=>{
            engine.runRenderLoop(function () {
              scene.render();
            });
          })
      
      
          window.addEventListener("resize", ()=>{
             engine.resize()
          });

效果