gas-injection/src/views/vent/home/configurable/components/three3D.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div id="three3D"></div>
</template>
<script lang="ts" setup>
  import { ref, watch, onMounted, onUnmounted } from 'vue';
  import UseThree from '/@/utils/threejs/useThree';
  import { animateCamera } from '/@/utils/threejs/util';
  import * as THREE from 'three';
  import useEvent from '/@/utils/threejs/useEvent';

  const props = defineProps<{
    modalName: string;
  }>();

  let modal, modalGroup;

  const mouseEvent = () => {
    console.log(modal.camera, modal.orbitControls);
  };
  const addMouseEvent = () => {
    // 定义鼠标点击事件
    modal.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
  };
  const addLight = () => {
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(-110, 150, 647);
    modalGroup?.add(directionalLight);
  };
  const setModelType = () => {
    return new Promise(async (resolve) => {
      const modalConfigurations = {
        workFace11: {
          render: null,
          group: modalGroup ? modalGroup : null,
          newP: { x: -2.211555197992825, y: 27.130029732875393, z: 2.3018919451652007 },
          newT: { x: -2.211555197992825, y: -8.604453425019353, z: 2.301856157557903 },
        },
        jdds: {
          render: null,
          group: modalGroup ? modalGroup : null,
          newP: { x: 0.22197787154285728, y: 29.010792085965782, z: 2.477736279196267 },
          newT: { x: 0.22197787154285728, y: -8.604453177192061, z: 2.477698375233975 },
        },
      };
      await initModal();
      if (modalConfigurations[props.modalName]) {
        const oldCameraPosition = { x: 100, y: 0, z: 10 };
        const config = modalConfigurations[props.modalName];

        setTimeout(async () => {
          await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, config.newP, config.newT, modal);
          modal.scene?.add(modalGroup);
          resolve(null);
        }, 1000);
      }
    });
  };

  const customModal = () => {
    if (props.modalName == 'workFace11') {
      const DiXing = modalGroup.getObjectByName('PouMian01')?.getObjectByName('DiXing')?.getObjectByName('DiXing_1');
      if (DiXing) {
        DiXing.visible = false;
      }
    }
  };

  const initModal = () => {
    return new Promise((resolve) => {
      modal.setGLTFModel(props.modalName).then(async (gltf) => {
        const gltfModal = gltf[0];
        modalGroup = gltfModal;
        console.log('模型文件', gltfModal);
        addLight();
        customModal();
        modal.animate();
        addMouseEvent();
        // this.group.name = this.modelName;
        // setModalCenter(this.group);
        // this.group.scale.set(2.5, 2.5, 2.5);
        // this.setThreePlane();
        // this.setControls();
        resolve(null);
      });
    });
  };

  watch(
    () => props.modalName,
    async (val) => {
      if (val) {
        await setModelType();
      }
    }
  );

  onMounted(async () => {
    modal = new UseThree('#three3D', '');
    if (modal) {
      modal.setEnvMap('test1.hdr');
      modal.renderer.toneMappingExposure = 1.0;
      modal.renderer.sortObjects = true;
      modal.orbitControls.update();
      await setModelType();
    }
  });

  onUnmounted(() => {
    modal.clearGroup(modalGroup);
    modal.destroy();
    modalGroup = null;
    modal = null;
  });
</script>
<style lang="less" scoped>
  #three3D {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
</style>