mky-vent-base/src/views/vent/monitorManager/windowMonitor/window.threejs.ts

import * as THREE from 'three';
import UseThree from '../../../../utils/threejs/useThree';
import singleWindow from './dandaoFc.threejs';
import doubleWindow from './shuangdaoFc.threejs';
import singleWindowXk from './dandaoFcXk.threejs';
import { animateCamera } from '/@/utils/threejs/util';
import useEvent from '../../../../utils/threejs/useEvent';
import { useGlobSetting } from '/@/hooks/setting';

// import * as dat from 'dat.gui';
// const gui = new dat.GUI();
// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';

// 模型对象、 文字对象
let model: UseThree,
  singleWindowObj,
  doubleWindowObj: doubleWindow,
  singleWindowXkObj: singleWindowXk,
  group: THREE.Object3D,
  windowType = 'singleWindow';

const rotationParam = {
  frontDeg0: 0, // 前门初始
  frontDeg1: 0, // 前门目标
  backDeg0: 0, // 后门初始
  backDeg1: 0, // 后门目标
};

const { mouseDownFn } = useEvent();
// 打灯光
const addLight = () => {
  if (!model || !model.scene) return;

  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(-110, 150, 647);
  model.scene?.add(directionalLight);
  // directionalLight.target = group;

  const pointLight2 = new THREE.PointLight(0xffffff, 1, 150);
  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(19, 25, -7);
  pointLight3.shadow.bias = 0.05;
  model.scene.add(pointLight3);

  const pointLight6 = new THREE.PointLight(0xffffff, 1, 300);
  pointLight6.position.set(51, 51, 9);
  pointLight6.shadow.bias = 0.05;
  model.scene.add(pointLight6);
};

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

// 鼠标点击、松开事件
const mouseEvent = (event) => {
  if (event.button == 0) {
    mouseDownFn(model, group, event, (intersects) => {
      if (windowType === 'doubleWindow' && doubleWindowObj) {
        doubleWindowObj.mousedownModel.call(doubleWindowObj, intersects);
      } else if (windowType === 'singleWindow' && singleWindowObj) {
        singleWindowObj.mousedownModel.call(singleWindowObj, intersects);
      } else if (windowType === 'singleXkWindow' && singleWindowXkObj) {
        singleWindowXkObj.mousedownModel.call(singleWindowXkObj, intersects);
      }
    });
    console.log('摄像头控制信息', model.orbitControls, model.camera);
  }
};

export const addMonitorText = (selectData) => {
  if (windowType === 'doubleWindow' && doubleWindowObj) {
    return doubleWindowObj.addMonitorText.call(doubleWindowObj, selectData);
  } else if (windowType === 'singleWindow' && singleWindowObj) {
    return singleWindowObj.addMonitorText.call(singleWindowObj, selectData);
  } else if (windowType === 'singleXkWindow' && singleWindowXkObj) {
    return singleWindowXkObj.addMonitorText.call(singleWindowXkObj, selectData);
  }
};

export function computePlay(data, maxarea, isFirst = false) {
  if (windowType === 'doubleWindow' || windowType === 'singleWindow') {
    if (data.OpenDegree || data.OpenDegree1 || data.OpenDegree2) {
      maxarea = 180;
      if (data.OpenDegree) {
        rotationParam.frontDeg0 = (180 / maxarea) * Number(isFirst ? 0 : data.OpenDegree);
        rotationParam.frontDeg1 = (180 / maxarea) * Number(data.OpenDegree) || 0;
      }
      if (data.OpenDegree1) {
        rotationParam.frontDeg0 = (180 / maxarea) * Number(isFirst ? 0 : data.OpenDegree1);
        rotationParam.frontDeg1 = (180 / maxarea) * Number(data.OpenDegree1) || 0;
      }
      if (data.OpenDegree2) {
        rotationParam.backDeg0 = (180 / maxarea) * Number(isFirst ? 0 : data.OpenDegree2);
        rotationParam.backDeg1 = (180 / maxarea) * Number(data.OpenDegree2) || 0;
      }
    } else {
      if (!maxarea) maxarea = 90;
      rotationParam.frontDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.forntArea);
      rotationParam.backDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.rearArea);
      rotationParam.frontDeg1 = (90 / maxarea) * Number(data.forntArea) || 0;
      rotationParam.backDeg1 = (90 / maxarea) * Number(data.rearArea) || 0;
    }

    if (!rotationParam.frontDeg1 && !rotationParam.backDeg1) {
      // 当返回值有误时默认关闭
      play(rotationParam, 0);
    } else {
      if (data.nwindownum == 1 || data.nwindownum == 2) {
        setTimeout(() => {
          play(rotationParam, 1);
        }, 0);
      }
      if (data.nwindownum == 2) {
        setTimeout(() => {
          play(rotationParam, 2);
        }, 0);
      }
    }
  } else if (windowType === 'singleXkWindow') {
    const acosToAngle = (cosValue) => {
      cosValue = Math.max(Math.min(cosValue, 1), -1);
      // 计算角度
      return Math.asin(cosValue) * (180 / Math.PI);
    };
    const sina = Math.sqrt((Math.sin((78 * Math.PI) / 180) ** 2 * parseFloat(data.forntArea)) / parseFloat(maxarea));
    const angleInRadians = acosToAngle(sina);
    rotationParam.frontDeg1 = angleInRadians;
    if (!rotationParam.frontDeg1 && !rotationParam.backDeg1) {
      // 当返回值有误时默认关闭
      play(rotationParam, 0);
    } else {
      setTimeout(() => {
        play(rotationParam, 1);
      }, 0);
    }
  }
}

export const play = (rotationParam, flag) => {
  if (windowType === 'doubleWindow' && doubleWindowObj) {
    return doubleWindowObj.play.call(doubleWindowObj, rotationParam, flag);
  } else if (windowType === 'singleWindow' && singleWindowObj) {
    return singleWindowObj.play.call(singleWindowObj, rotationParam, flag);
  } else if (windowType === 'singleXkWindow' && singleWindowXkObj) {
    return singleWindowXkObj.play.call(singleWindowXkObj, rotationParam, flag);
  }
};

// 切换风窗类型
export const setModelType = (type) => {
  // if (!model || !model.scene) return;
  const { sysOrgCode } = useGlobSetting();
  // const sysOrgCode = 'sdmtjtswmk';
  windowType = type;
  return new Promise((resolve) => {
    // 显示双道风窗
    if (windowType === 'doubleWindow' && doubleWindowObj && doubleWindowObj.group) {
      model.startAnimation = doubleWindowObj.render.bind(doubleWindowObj);
      model.scene?.remove(group);
      group = doubleWindowObj.group;
      const oldCameraPosition = { x: 100, y: 0, z: 10 };
      // let newP, newT;
      // if (sysOrgCode === 'sdmtjtyjlmk') {
      //   newP = { x: 34.294433107431956, y: 19.284123769585108, z: 47.717286013509835 };
      //   newT = { x: 12.311816240141978, y: -5.691930035759495, z: -5.57302688985693 };
      // } else {
      //   newP = { x: 66.257, y: 57.539, z: 94.313 };
      //   newT = { x: 0, y: 0, z: 0 };
      // }
      const newP = { x: 66.257, y: 57.539, z: 94.313 };
      const newT = { x: 0, y: 0, z: 0 };
      model.scene?.add(doubleWindowObj.group);
      setTimeout(async () => {
        resolve(null);
        await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, model);
      }, 1000);
    } else if (windowType === 'singleWindow') {
      // 显示单道风窗
      model.startAnimation = singleWindowObj.render.bind(singleWindowObj);
      model.scene?.remove(group);
      group = singleWindowObj.group;
      const oldCameraPosition = { x: 100, y: 0, z: 10 };
      let newP, newT;
      if (sysOrgCode === 'sdmtjtyjlmk') {
        newP = { x: 34.294433107431956, y: 19.284123769585108, z: 47.717286013509835 };
        newT = { x: 12.311816240141978, y: -5.691930035759495, z: -5.57302688985693 };
      } else {
        newP = { x: 66.257, y: 57.539, z: 94.313 };
        newT = { x: 0, y: 0, z: 0 };
      }
      model.scene?.add(singleWindowObj.group);
      setTimeout(async () => {
        resolve(null);
        await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, model);
      }, 1000);
    } else if (windowType === 'singleXkWindow') {
      // 显示单道风窗
      model.startAnimation = singleWindowXkObj.render.bind(singleWindowXkObj);
      model.scene?.remove(group);
      group = singleWindowXkObj.group;
      const oldCameraPosition = { x: 100, y: 0, z: 10 };
      model.scene?.add(singleWindowXkObj.group);
      setTimeout(async () => {
        resolve(null);
        await animateCamera(
          oldCameraPosition,
          { x: 0, y: 0, z: 0 },
          { x: 116.08531358656566, y: 81.45510733175816, z: 193.00752046594465 },
          { x: 23.446366480086372, y: -12.335134633777185, z: -5.63294282643405 },
          model
        );
      }, 1000);
    }
  });
};

export const mountedThree = (playerDom) => {
  // const { sysOrgCode } = useGlobSetting();
  const sysOrgCode = 'sdmtjtbltmk';
  return new Promise(async (resolve) => {
    model = new UseThree('#window3D');
    if (!model || !model.renderer || !model.camera) return;
    model.setEnvMap('royal_esplanade_1k.hdr');
    model.renderer.toneMappingExposure = 1.8;
    model.camera.position.set(100, 0, 1000);

    singleWindowXkObj = new singleWindowXk(model);

    // 这里是加载的蓝色有栅栏的模型
    // if (sysOrgCode === 'sdmtjtbetmk') {
    //   const singleWindowBet = await import('./dandaoFcBet.threejs');
    //   if (singleWindowBet) singleWindowObj = new singleWindowBet.default(model);
    // }

    if (sysOrgCode === 'sdmtjtyjlmk') {
      // 单
      const singleWindowYjl = await import('./dandaoFcYjl.threejs');
      if (singleWindowYjl) singleWindowObj = new singleWindowYjl.default(model);
    } else {
      singleWindowObj = new singleWindow(model);
    }

    if (sysOrgCode === 'sdmtjtswmk') {
      const doubleWindow = await import('./shuangdaoFcSw.threejs');
      if (doubleWindow) doubleWindowObj = new doubleWindow.default(model);
    } else if (sysOrgCode === 'sdmtjtbltmk') {
      const doubleWindow = await import('./shuangdaoFcBlt.threejs');
      if (doubleWindow) doubleWindowObj = new doubleWindow.default(model);
    } else {
      doubleWindowObj = new doubleWindow(model);
    }

    doubleWindowObj.mountedThree(playerDom);
    singleWindowXkObj.mountedThree();
    singleWindowObj.mountedThree(playerDom);
    model.animate();
    // addLight();
    startAnimation();
    resolve(null);
  });
};

export const destroy = () => {
  if (model) {
    model.isRender = false;
    console.log('场景销毁前信息----------->', model.renderer?.info);
    model.isRender = false;
    doubleWindowObj.destroy();
    singleWindowObj.destroy();
    singleWindowXkObj.destroy();
    model.destroy();
    model = null;
    group = null;
    singleWindowObj = null;
    doubleWindowObj = null;
    singleWindowXkObj = null;
  }
};