mky-vent-5/src/views/vent/monitorManager/windrectMonitor/windrect.threejs.ts

import * as THREE from 'three';
import { animateCamera, getTextCanvas, renderVideo } from '/@/utils/threejs/util';
import UseThree from '../../../../hooks/core/threejs/useThree';
import lmWindRect from './longmen.threejs';
import zdWindRect from './zhedie.threejs';
import dsWindRect from './duishe.threejs';
import gsap from 'gsap';
import * as dat from 'dat.gui';
// const gui = new dat.GUI();

// 模型对象、 文字对象
let model, //
  group,
  lmWindRectObj,
  zdWindRectObj,
  dsWindRectObj,
  windRectType = 'lmWindRect';

// 打灯光
const addLight = () => {
  // if (windRectType === 'lmWindRect') {
  //   lmWindRectObj.addLight.call(lmWindRectObj);
  // } else if (windRectType === 'zdWindRect') {
  //   zdWindRectObj.addLight.call(zdWindRectObj);
  // } else if (windRectType === 'dsWindRect') {
  //   dsWindRectObj.addLight.call(dsWindRectObj);
  // }
  const pointLight2 = new THREE.PointLight(0xffeeee, 1, 0);
  pointLight2.position.set(317, 41, -21);
  pointLight2.shadow.bias = 0.05;
  model.scene.add(pointLight2);
  //
  const pointLight3 = new THREE.PointLight(0xffffff, 1, 138);
  pointLight3.position.set(-202, 50, 27.8);
  pointLight3.shadow.bias = 0.05;
  model.scene.add(pointLight3);
  //
  const pointLight4 = new THREE.PointLight(0xffeeee, 1, 162);
  pointLight4.position.set(83, 62, -14);
  pointLight4.shadow.bias = 0.05;
  model.scene.add(pointLight4);
  //
  const pointLight5 = new THREE.PointLight(0xffffff, 0.8, 176);
  pointLight5.position.set(-123, 61.6, -18);
  pointLight5.shadow.bias = 0.05;
  model.scene.add(pointLight5);
  //
  const pointLight6 = new THREE.PointLight(0xffffff, 1.5, 64);
  pointLight6.position.set(-76, 48, 18);
  pointLight6.shadow.bias = 0.05;
  model.scene.add(pointLight6);

  const pointLight7 = new THREE.PointLight(0xffffff, 1, 302);
  pointLight7.position.set(-220, -177, -3.5);
  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.distance = 0;
  spotLight.position.set(-470, -500, 500);
  model.scene.add(spotLight);

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

// 重置摄像头
const resetCamera = () => {
  model.camera.position.set(0, 0, 500);
  model.camera.rotation.set(-27.88, 14.35, 7.47);
  model.orbitControls?.update();
  model.camera.updateProjectionMatrix();
};

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

// 鼠标点击、松开事件
const mouseEvent = (event) => {
  event.stopPropagation();
  // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
  model.mouse.x = ((event.clientX - model.canvasContainer.getBoundingClientRect().left) / model.canvasContainer.clientWidth) * 2 - 1;
  model.mouse.y = -((event.clientY - model.canvasContainer.getBoundingClientRect().top) / model.canvasContainer.clientHeight) * 2 + 1;
  (model.rayCaster as THREE.Raycaster).setFromCamera(model.mouse, model.camera as THREE.Camera);
  if (group) {
    const intersects = model.rayCaster?.intersectObjects(group.children, false) as THREE.Intersection[];
    if (intersects.length > 0) {
      // 单道、 双道
      if (windRectType === 'lmWindRect') {
        lmWindRectObj.mousedownModel.call(lmWindRectObj, intersects);
      } else if (windRectType === 'zdWindRect') {
        zdWindRectObj.mousedownModel.call(zdWindRectObj, intersects);
      } else if (windRectType === 'dsWindRect') {
        dsWindRectObj.mousedownModel.call(dsWindRectObj, intersects);
      }
    }
  }
};

/* 添加监控数据 */
export const addFmText = (selectData) => {
  if (windRectType === 'lmWindRect') {
    return lmWindRectObj.addFmText.call(lmWindRectObj, selectData);
  } else if (windRectType === 'zdWindRect') {
    return zdWindRectObj.addFmText.call(zdWindRectObj, selectData);
  } else if (windRectType === 'dsWindRect') {
    return dsWindRectObj.addFmText.call(dsWindRectObj, selectData);
  }
};

export const play = (flag) => {
  if (windRectType === 'lmWindRect') {
    return lmWindRectObj.play.call(lmWindRectObj, flag);
  } else if (windRectType === 'zdWindRect') {
    return zdWindRectObj.play.call(zdWindRectObj, flag);
  } else if (windRectType === 'dsWindRect') {
    return dsWindRectObj.play.call(dsWindRectObj, flag);
  }
};

// 切换风窗类型
export const setModelType = (type) => {
  windRectType = type;
  model.camera.position.set(-1000, 100, 500);
  return new Promise((resolve) => {
    // 显示双道风窗
    if (windRectType === 'lmWindRect') {
      model.startAnimation = lmWindRectObj.render.bind(lmWindRectObj);
      group = lmWindRectObj.group;
      if (model.scene.getObjectByName('zdcf')) {
        model.scene.remove(zdWindRectObj.group);
      }
      if (model.scene.getObjectByName('dscf')) {
        model.scene.remove(dsWindRectObj.group);
      }
      const oldCameraPosition = { x: -1000, y: 100, z: 500 };
      model.scene.add(lmWindRectObj.group);
      setTimeout(async () => {
        resolve(null);
        const position = lmWindRectObj.group.position;

        await animateCamera(
          oldCameraPosition,
          oldCameraPosition,
          { x: 46.257, y: 57.539, z: 94.313 },
          { x: position.x, y: position.y, z: position.z },
          model,
          0.8
        );
      }, 300);
    } else if (windRectType === 'zdWindRect') {
      model.startAnimation = zdWindRectObj.render.bind(zdWindRectObj);
      group = zdWindRectObj.group;
      if (model.scene.getObjectByName('lmcf')) {
        model.scene.remove(lmWindRectObj.group);
      }
      if (model.scene.getObjectByName('dscf')) {
        model.scene.remove(dsWindRectObj.group);
      }
      model.scene.add(zdWindRectObj.group);
      const oldCameraPosition = { x: -1000, y: 100, z: 500 };
      setTimeout(async () => {
        resolve(null);
        const position = zdWindRectObj.group.position;
        await animateCamera(
          oldCameraPosition,
          oldCameraPosition,
          { x: 66.257, y: 57.539, z: 104.313 },
          { x: position.x, y: position.y, z: position.z },
          model,
          0.8
        );
      }, 300);
    } else if (windRectType === 'dsWindRect') {
      model.startAnimation = dsWindRectObj.render.bind(dsWindRectObj);
      group = dsWindRectObj.group;
      if (model.scene.getObjectByName('lmcf')) {
        model.scene.remove(lmWindRectObj.group);
      }
      if (model.scene.getObjectByName('zdcf')) {
        model.scene.remove(zdWindRectObj.group);
      }
      model.scene.add(dsWindRectObj.group);
      setTimeout(async () => {
        resolve(null);
        const position = dsWindRectObj.group.position;
        const oldCameraPosition = { x: -1020, y: 100, z: 500 };
        await animateCamera(
          oldCameraPosition,
          oldCameraPosition,
          { x: 46.257, y: 57.539, z: 104.313 },
          { x: position.x, y: position.y, z: position.z },
          model,
          0.8
        );
      }, 300);
    }
  });
};

export const mountedThree = (playerVal1, playerVal2) => {
  return new Promise(async (resolve) => {
    model = new UseThree('#window3D');
    model.setEnvMap('test1');
    model.renderer.toneMappingExposure = 0.8;
    addLight();

    lmWindRectObj = new lmWindRect(model, playerVal1, playerVal2);
    await lmWindRectObj.mountedThree();
    zdWindRectObj = new zdWindRect(model, playerVal1);
    await zdWindRectObj.mountedThree();
    dsWindRectObj = new dsWindRect(model, playerVal1);
    await dsWindRectObj.mountedThree();
    resolve(null);
    model.animate();
    startAnimation();
  });
};

export const destroy = () => {
  if (model) {
    lmWindRectObj?.destroy();
    zdWindRectObj?.destroy();
    zdWindRectObj?.destroy();
    model.deleteModal();
    model = null;
    group = null;
  }
};