86 lines
2.2 KiB
Vue
86 lines
2.2 KiB
Vue
<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>
|