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

import * as THREE from 'three';
import UseThree from '../../../../hooks/core/threejs/useThree';
import singleWindow from './dandaoFc.threejs'
import doubleWindow from './shuangdaoFc.threejs'
import {animateCamera} from '/@/utils/threejs/util'
import gsap from "gsap";

// 模型对象、 文字对象
let model,
  singleWindowObj,
  doubleWindowObj,
  group,
  windowType = 'singleWindow',
  oldCameraPosition = {x: 500, y:500, z:500};


// 打灯光
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 resetCamera = () => {
//   model.camera.position.set(30.328, 58.993, 148.315);
//   model.camera.rotation.set(-31.85, 30.07, 17.29);
//   model.orbitControls?.update();
//   model.camera.updateProjectionMatrix();
// };

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

// 鼠标点击、松开事件
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(windowType === 'doubleWindow') {
        doubleWindowObj.mousedownModel.call(doubleWindowObj, intersects)
      }else if(windowType === 'singleWindow') {
        singleWindowObj.mousedownModel.call(singleWindowObj, intersects)
      }
    }
  }
};

export const addFmText = (selectData) => {
  if(windowType === 'doubleWindow') {
    return doubleWindowObj.addFmText.call(doubleWindowObj, selectData);
  }else{
    return singleWindowObj.addFmText.call(singleWindowObj, selectData);
  }
}

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

// 切换风窗类型
export const setModelType = (type) => {
  windowType = type
  model.camera.position.set(500, 500, 500);

  return new Promise((resolve) => {
    // 显示双道风窗
    if(windowType === 'doubleWindow') {
      model.startAnimation = doubleWindowObj.render.bind(doubleWindowObj);
      group = doubleWindowObj.group
      if( model.scene.getObjectByName('ddFc')){
        model.scene.remove(singleWindowObj.group)
      }
      setTimeout(() => {
        resolve(null)

        const position = doubleWindowObj.group
        animateCamera(oldCameraPosition, oldCameraPosition, {x: 66.257, y: 57.539, z: 94.313}, {x: position.x, y: position.y, z: position.z }, model)
        model.scene.add(doubleWindowObj.group)
      }, 300)

    }else if(windowType === 'singleWindow') {
      // 显示单道风窗
      model.startAnimation = singleWindowObj.render.bind(singleWindowObj);
      group = singleWindowObj.group
      if( model.scene.getObjectByName('sdFc')){
        model.scene.remove(doubleWindowObj.group)
      }
      setTimeout(() => {
        resolve(null)
        const position = {x:0, y:0, z:0}
        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)
        model.scene.add(singleWindowObj.group)
      }, 300)
    }
  })
}

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

    addLight()
    // resetCamera()

    // 单道、 双道
    doubleWindowObj = new doubleWindow(model, playerVal1, playerVal2)
    singleWindowObj = new singleWindow(model, playerVal1)
    await doubleWindowObj.mountedThree()
    await singleWindowObj.mountedThree()

    await setModelType(windowType)

    startAnimation()
    setTimeout(() => {
      model.animate();
    }, 0)
    resolve(null)
  });
};

export const destroy = () => {
  if (model) {
    model.deleteModal1();
    model = null;
    group = null
    singleWindowObj = null
    doubleWindowObj = null
  }
};