mky-vent-base/src/views/vent/monitorManager/mainFanMonitor/main.threejs.ts

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

// 模型对象、 文字对象
let model, //
  group,
  bgGroup,
  mainWindObj,
  modalType = 'mainWind';

// 打灯光
const addLight = () => {
  const pointLight6 = new THREE.PointLight(0xffffff, 1.5, 0);
  pointLight6.position.set(-636, 137, 500);
  pointLight6.shadow.bias = 0.05;
  model.scene.add(pointLight6);
  //
  const pointLight7 = new THREE.PointLight(0xffffff, 1, 500);
  pointLight7.position.set(-209, 72, 83.3);
  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.position.set(500, 500, 687);
  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;

  // gui.add(spotLight.position, 'x', -1000, 1000);
  // gui.add(spotLight.position, 'y', -1000, 1000);
  // gui.add(spotLight.position, 'z', -1000, 1000);
  // gui.add(spotLight.shadow, 'bias', -1, 1);
  // gui.add(spotLight.shadow, 'focus', -2, 2);
  // gui.add(spotLight, 'distance', 0, 1000);

  // // gui.add(pointLight5.position, 'x', -1000, 1000);
  // // gui.add(pointLight5.position, 'y', -1000, 1000);
  // // gui.add(pointLight5.position, 'z', -1000, 1000);
  // // gui.add(spotLight.shadow, 'bias', -1, 1);
  // // gui.add(spotLight.shadow, 'focus', -2, 2);
  // // gui.add(pointLight5, 'distance', 0, 1000);

  // gui.add(pointLight6.position, 'x', -1000, 1000);
  // gui.add(pointLight6.position, 'y', -1000, 1000);
  // gui.add(pointLight6.position, 'z', -1000, 1000);
  // gui.add(spotLight.shadow, 'bias', -1, 1);
  // gui.add(spotLight.shadow, 'focus', -2, 2);
  // gui.add(pointLight6, 'distance', 0, 1000);

  // gui.add(pointLight7.position, 'x', -1000, 1000);
  // gui.add(pointLight7.position, 'y', -1000, 1000);
  // gui.add(pointLight7.position, 'z', -1000, 1000);
  // gui.add(spotLight.shadow, 'bias', -1, 1);
  // gui.add(spotLight.shadow, 'focus', -2, 2);
  // gui.add(pointLight7, 'distance', 0, 1000);
};

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

const setControls = () => {
  model.orbitControls.panSpeed = 0.5;
  model.orbitControls.rotateSpeed = 0.5;
  model.orbitControls.maxPolarAngle = Math.PI / 3;
  model.orbitControls.minPolarAngle = Math.PI / 4;
};

// 初始化左右摇摆动画
const startAnimation = () => {
  // 定义鼠标点击事件
  model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
  model.canvasContainer?.addEventListener('pointerup', (event) => {
    event.stopPropagation();
  });
};

// 鼠标点击、松开事件
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 (modalType === 'mainWindRect') {
        mainWindObj.mousedownModel.call(mainWindObj, intersects);
      }
    }
  }
};

/* 添加监控数据 */
export const addText = (selectData) => {
  if (modalType === 'mainWindRect') {
    return mainWindObj.addCssText.call(mainWindObj, selectData);
  }
};

/* 刷新echarts曲线图 */
export const resetEcharts = (selectData) => {
  if (modalType === 'mainWindRect') {
    return mainWindObj.addEcharts.call(mainWindObj);
  }
};

/**
 *
 * @param controlType //操作类型
 * @param deviceType // 设备类型，前后风机
 * @param frequencyVal // 频率
 * @param state // 启停状态
 * @param smokeDirection // 气流路径
 * @returns
 */
export const play = (controlType, deviceType, frequencyVal?, state?, smokeDirection?) => {
  if (modalType === 'mainWindRect') {
    return mainWindObj.playSmoke.call(mainWindObj, controlType, deviceType, frequencyVal, state, smokeDirection);
  }
};

// 切换风窗类型
export const setModelType = (type) => {
  modalType = type;
  return new Promise((resolve) => {
    // 显示双道风窗
    if (modalType === 'mainWindRect') {
      model.startAnimation = mainWindObj.render.bind(mainWindObj);
      group = mainWindObj.group;
      setTimeout(async () => {
        resolve(null);
        const position = mainWindObj.group.position;
        const oldCameraPosition = { x: -500, y: 100, z: 2000 };
        await animateCamera(
          oldCameraPosition,
          oldCameraPosition,
          { x: 0, y: -100.539, z: 104.313 },
          { x: position.x, y: position.y, z: position.z },
          model,
          0.8
        );
        model.scene.add(mainWindObj.group);
      }, 300);
    }
  });
};

export const mountedThree = (playerVal1) => {
  return new Promise(async (resolve) => {
    model = new UseThree('#main3D', '#main3DCSS');

    model.setEnvMap('test1');
    model.renderer.toneMappingExposure = 1;
    addLight();
    setControls();
    resetCamera();
    model.setModel('bg').then(async (gltf) => {
      gltf.scene.position.y = 36.6;
      bgGroup = gltf.scene;
      model.scene.add(bgGroup);
      mainWindObj = new mainWindRect(model, playerVal1);
      await mainWindObj.mountedThree();
      model.animate();
      resolve(null);
    });
    startAnimation();
  });
};

export const destroy = () => {
  if (model) {
    model.deleteModal();
    model.clearGroup(bgGroup);
    model = null;
    group = null;
  }
};