vent-template/src/views/vent/monitorManager/gateMonitor/gate.threejs.ts

import * as THREE from 'three';
import UseThree from '../../../../utils/threejs/useThree';
import Fm1 from './gate.threejs.two';
import { animateCamera } from '/@/utils/threejs/util';
import useEvent from '../../../../utils/threejs/useEvent';

// 模型对象、 文字对象
let model,
  fm1,
  fm2,
  group,
  fmType = '';

const { mouseDownFn } = useEvent();

// 打灯光
const addLight = () => {
  const pointLight2 = new THREE.PointLight(0xffeeee, 1, 83);
  pointLight2.position.set(-101, 34, 16);
  pointLight2.shadow.bias = 0.05;
  model.scene.add(pointLight2);

  const pointLight3 = new THREE.PointLight(0xffffff, 1, 150);
  pointLight3.position.set(-61, 37, 13.9);
  pointLight3.shadow.bias = 0.05;
  model.scene.add(pointLight3);

  const pointLight4 = new THREE.PointLight(0xffeeee, 0.6, 300);
  pointLight4.position.set(-2, 26, 20);
  pointLight4.shadow.bias = 0.05;
  model.scene.add(pointLight4);

  const pointLight5 = new THREE.PointLight(0xffffff, 0.8, 120);
  pointLight5.position.set(-54, 30, 23.8);
  pointLight5.shadow.bias = 0.05;
  model.scene.add(pointLight5);

  const pointLight7 = new THREE.PointLight(0xffffff, 1, 1000);
  pointLight7.position.set(45, 51, -4.1);
  pointLight7.shadow.bias = 0.05;
  model.scene.add(pointLight7);

  const spotLight = new THREE.SpotLight();
  spotLight.angle = Math.PI / 16;
  spotLight.penumbra = 0;
  spotLight.castShadow = true;
  spotLight.intensity = 1;
  spotLight.position.set(-231, 463, 687);
  model.scene.add(spotLight);

  spotLight.shadow.camera.near = 0.5; // default
  spotLight.shadow.camera.far = 1000; // default
  spotLight.shadow.focus = 1.2;
  spotLight.shadow.bias = -0.000002;
};

// 初始化左右摇摆动画
const startAnimation = () => {
  // 定义鼠标点击事件
  model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
  model.canvasContainer?.addEventListener('pointerup', (event) => {
    event.stopPropagation();
    // 单道、 双道
    if (fmType === 'fm1') {
      fm1.mouseUpModel.call(fm1);
    } else if (fmType === 'fm2') {
      // fm2.mouseUpModel.call(fm2);
    }
  });
};

// 鼠标点击、松开事件
const mouseEvent = (event) => {
  mouseDownFn(model, group, event, (intersects) => {
    if (fmType === 'fm1') {
      fm1.mousedownModel.call(fm1, intersects);
    } else if (fmType === 'fm2') {
      // fm2.mousedownModel.call(fm2, intersects);
    }
  });
  console.log('摄像头控制信息', model.orbitControls, model.camera);
};

export const addMonitorText = (selectData) => {
  if (fmType === 'fm1') {
    return fm1.addMonitorText.call(fm1, selectData);
  } else {
    // return fm2.addMonitorText.call(fm2, selectData);
  }
};

export const deviceDetailCard = () => {
  if (fmType === 'fm1') {
    return fm1.deviceDetailCard.call(fm1);
  } else {
    // return fm2.addMonitorText.call(fm2);
  }
};

export const play = (rotationParam, flag) => {
  if (fmType === 'fm1') {
    return fm1.play.call(fm1, rotationParam, flag);
  } else {
    // return fm2.play.call(fm2, rotationParam, flag);
  }
};

// 切换风门类型
export const setModelType = (type) => {
  fmType = type;
  return new Promise((resolve) => {
    // 暂停风门1动画
    fm1.clipActionArr.frontDoor.reset();
    fm1.clipActionArr.frontDoor.time = 0.5;
    fm1.clipActionArr.backDoor.reset();
    fm1.clipActionArr.backDoor.time = 0.5;
    fm1.clipActionArr.frontDoor.stop();
    fm1.clipActionArr.backDoor.stop();

    if (fmType === 'fm1') {
      model.startAnimation = fm1.render.bind(fm1);
      group = fm1.group;
      group.rotation.y = 0;
      if (model.scene.getObjectByName('fm')) {
        model.scene.remove(fm2.group);
      }
      const oldCameraPosition = { x: -1000, y: 100, z: 500 };
      model.scene.add(fm1.group);
      setTimeout(async () => {
        resolve(null);
        await animateCamera(
          oldCameraPosition,
          { x: 0, y: 0, z: 0 },
          { x: 50.99, y: 69.32, z: 93.61 },
          { x: -10.04, y: -14.38, z: -31.4 },
          model,
          0.8
        );
      }, 300);
    } else if (fmType === 'fm2') {
      // 显示单道风窗
      // model.startAnimation = fm2.render.bind(fm2);
      // group = fm2.group;
      // if (model.scene.getObjectByName('fm2')) {
      //   model.scene.remove(fm1.group);
      // }
      // const oldCameraPosition = { x: 100, y: 0, z: 500 };
      // model.scene.add(fm2.group);
      // setTimeout(async () => {
      //   resolve(null);
      //   const position = { x: 0, y: 0, z: 0 };
      //   await animateCamera(
      //     oldCameraPosition,
      //     { x: 0, y: 0, z: 0 },
      //     { x: 66.257, y: 57.539, z: 94.313 },
      //     { x: position.x, y: position.y, z: position.z },
      //     model
      //   );
      // }, 300);
    }
  });
};

export const mountedThree = (playerVal1, playerVal2) => {
  return new Promise(async (resolve) => {
    model = new UseThree('#damper3D', '', '#deviceDetail');
    model.setEnvMap('test1');
    model.renderer.toneMappingExposure = 0.9;
    model.camera.position.set(100, 0, 1000);
    // 单道、 双道
    fm1 = new Fm1(model, playerVal1, playerVal2);
    // fm2 = new singleWindow(model, playerVal1);
    await fm1.mountedThree();
    // await singleWindowObj.mountedThree();

    model.animate();
    resolve(null);
    addLight();
    startAnimation();
  });
};

export const destroy = () => {
  if (model) {
    fm1.destroy();
    // fm2.destroy();
    model.deleteModal();
    model = null;
    group = null;
    fm1 = null;
    fm2 = null;
  }
};