邓洁 : 隧道模型合并

src/components/content/tunnelScene/TunnelScene.vue

@@ -0,0 +1,85 @@
+<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("../../../../public/devicesModel/Camera.obj");
+    deviceList.push(result);
+    result = await loadModel("../../../../public/devicesModel/box_device.obj");
+    deviceList.push(result);
+    result = await loadModel("../../../../public/devicesModel/dev2.obj");
+    deviceList.push(result);
+    result = await loadModel("../../../../public/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>