vue3中THINGJS初始化步骤

前提：npm i @ti-cli/thing-repo

1.在main.ts中设置初始化：

javascript 复制代码

import { Core, ScreenAdapter } from '@ti-cli/thing-repo'; 
   // 初始化core实例
const initCore = () => {
  window.coreIns = new Core({
    host:项目底座的地址,
    tenantCode: "master",
    tokenCode: 'TEST_TOKEN',
    depends: ['thingjs','uearth', 'thing.campus'], // 依赖-参数固定-thingjs uearth thing.campus EffectThemeControl
    hasLogin: false, // 是否需要登录 默认false 免登录  true 需要登录
    initCb: () => {
      window.configXxv = window.coreIns.Config.configXxv;
      // 核心初始化完毕
      initVue();
    },
  });
};
initCore()

2.在libs中添加wasm

3.在types文件夹中添加一个window.d.ts

javascript 复制代码

declare interface Window {
  app: any;
  config: any;
  campusManagerIns:any;
  effectManagerIns:any;
  campusPlacementIns: any;
  createPointTwinIns: any;
  THREE: any;
  mapManagerIns: any;
  createLineTwinIns: any;
  createRegionTwinIns: any;
  campusTwinsManagerIns: any;
  campusMapManagerIns:any;
  THING: any;
  coreIns: any;
  [key: string]: any;
}

declare module '*';
declare module 'uuid';

4.在想要引用的页面中设置一个容器：

TypeScript 复制代码

<template>
  <div class="scene">
    <div id="div3d"></div>
</template>

5.在对应页面中：

TypeScript 复制代码

<script lang="ts" setup>
import { onMounted, onUnmounted, ref ,watch } from 'vue';
import { createContainer, CampusManager, EffectManager,CampusTwinsManager ,MapManager} from '@ti-cli/thing-repo';
// 1.初始化三维容器
const initScene = async () => {
  window.app = await createContainer({
    container: 'div3d',
    background: '#000000',
    wasmRootPath: './libs/wasm',
    core: window.coreIns,
  });
  // 2.加载三维场景
  loadCampus();
};
const buildingdata = ref()
// 加载场景
const loadCampus = () => {
  window.mapManagerIns = new MapManager({
   app: window.app, // THINGJS实例
   
  tileLayerUrl:地图瓦片,
 mapLoaded: ()=>{
     window.campusManagerIns = new CampusManager({
    app: window.app, // THINGJS实例
    core: window.coreIns, // 核心实例
    sceneCode: 获取到的万能token,
    flyToSetting: true, // 园区，建筑，楼层默认飞到设置视角 - 默认true
    initChildScene: false, // 加载主场景时是否加载子场景 默认false
    position:[0,0,0],
    lon:104.11449,//如果是放在地图上，就需要设置经纬度
   lat:30.64768
   ,
   height:-10,
   angle:180,
    loadProgress: (val: number) => {
      // 加载进度，可用于加载进度条
      // console.log('加载进度', val);
    },
    childSceneBeginLoad: () => {
      console.log('子场景开始加载');
    },
    childSceneLoaded: () => {
      console.log('子场景加载完毕');
    },
    sceneLoaded: async (campus: any) => {
      console.log('主场景加载完毕', window.campusManagerIns.curCampus);
    window.app.camera.enableMapControl = false
          // 层级切换
      changelevel(campus)
      
      // 效果包
      const effectOption = {
        app: window.app,
        core: window.coreIns,
        name: window.campusManagerIns.curCampusData.name,
        campus: window.campusManagerIns.curCampus,
        campusData: window.campusManagerIns.curCampusData,
        cb: (e: any) => {
          console.log('加载完毕', e);
        },
      }
      window.effectManagerIns = new EffectManager(effectOption)
    },
  });
  }
})
};
// 场景切换
const changelevel = (campus:any) => {
      window.app.level.change(campus);
}

6.如果想要再对默认的三维页面进行操作，那么就需要再主场景加载完毕的里面进行操作