<template>
  <div id="scene" ref="content">
    <dev-info ref="info" dev-name="no" dev-state="noState" />
    <edit-dev ref="edit" @check-dev="handleCheckDev" />
  </div>
</template>

<script setup>
import * as three from "three";
import ThreeDScene from "./sceneClass/demo.js";

// 导入模模型加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
// import { DRACOLoader } from "three/examples/jsm/loaders/dracoloader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as TWEEN from "three/examples/jsm/libs/tween.module";
import {
  CSS3DRenderer,
  CSS3DObject,
  CSS3DSprite,
} from "three/addons/renderers/CSS3DRenderer.js";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";

import DevInfo from "./childComp/DevInfo.vue";
import EditDev from "./childComp/EditDev.vue";
import { onMounted, ref } from "vue";

// 获取html标签跟随组件
const content = ref(null);
const info = ref(null);
const edit = ref(null);

const loader = new OBJLoader();
// 模版挂载后
onMounted(handleMounted);
// 处理回调
async function handleMounted() {
  const doms = [info.value.$el, edit.value.$el];
  const demo = new ThreeDScene(three, content.value);
  demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel.glb");
  demo.addOrbitControls(OrbitControls);
  demo.addTween(TWEEN);
  demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
  demo.addOBJLoader(OBJLoader);
  demo.loadeOBJModel();

  // 初始化设备模型

  try {
    const deviceList = [];
    let result = await loadModel("/devicesModel/Camera.obj");
    deviceList.push(result);
    result = await loadModel("/devicesModel/box_device.obj");
    deviceList.push(result);
    result = await loadModel("/devicesModel/dev2.obj");
    deviceList.push(result);
    result = await loadModel("/devicesModel/dev3.obj");
    deviceList.push(result);
  } catch (e) {}
  // demo.initDevicesModel();
}

function loadModel(path) {
  return new Promise((resolve, reject) => {
    loader.load(
      path,
      (obj) => {
        resolve(obj);
      },
      (xhr) => {},
      (err) => {
        reject(err);
      }
    );
  });
}
</script>

<style lang="scss" scope>
#scene {
  position: relative;
  height: 100vh;
  width: 100vw;
}
</style>
