gasInjection-project/src/views/vent/monitorManager/workFaceMonitor/workFace.threejs.base.ts

import * as THREE from 'three';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js';
import { setModalCenter, setTag3D } from '/@/utils/threejs/util';
import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import { gradientColors } from '/@/utils/threejs/util';

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

class WorkFace {
  model;
  modelName = 'workFace';
  group: THREE.Object3D = new THREE.Object3D();
  planeGroup: THREE.Group = new THREE.Group();
  bloomComposer: EffectComposer | null = null;
  finalComposer: EffectComposer | null = null;
  outlinePass: OutlinePass | null = null;
  positions: THREE.Vector3[][] = [];
  bloomLayer = new THREE.Layers();
  darkMaterial = new THREE.MeshBasicMaterial({ color: 'black', transparent: true, side: THREE.DoubleSide });
  materials = {};
  glob = {
    ENTIRE_SCENE: 0,
    BLOOM_SCENE: 10,
    N: 100,
  };
  locationTexture: THREE.Texture | null = null;
  warningLocationTexture: THREE.Texture | null = null;
  errorLocationTexture: THREE.Texture | null = null;
  playerStartClickTime1 = new Date().getTime();
  playerStartClickTime2 = new Date().getTime();
  planeNum = 0;

  constructor(model) {
    this.model = model;
    this.group.name = this.modelName;
  }
  addLight() {
    // const _this = this;
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(-196, 150, 258);
    this.group.add(directionalLight);
    directionalLight.target = this.group;

    // const pointLight = new THREE.PointLight(0xffffff, 1, 1000);
    // pointLight.position.set(12, 51, -27);
    // pointLight.shadow.bias = 0.05;
    // this.group.add(pointLight);

    // gui.add(directionalLight.position, 'x', -1000, 1000).onChange(() => {
    //   _this.render();
    // });
    // gui.add(directionalLight.position, 'y', -1000, 1000).onChange(() => {
    //   _this.render();
    // });
    // gui.add(directionalLight.position, 'z', -1000, 1000).onChange(() => {
    //   _this.render();
    // });
  }

  render() {
    this.model.renderer?.render(this.model.scene as THREE.Scene, this.model.camera as THREE.PerspectiveCamera);
    // const _this = this;
    // if (this.model && this.model.scene.getObjectByName(this.modelName)) {
    //   this.group?.traverse((obj) => {
    //     _this.darkenNonBloomed(obj);
    //   });
    //   this.bloomComposer?.render();
    //   this.group?.traverse((obj) => {
    //     _this.restoreMaterial(obj);
    //   });
    //   this.finalComposer?.render();
    // }
  }
  // 绘制抽采单元
  setPlanes = (n, colors = new Array(n).fill(new THREE.Color('rgb(100%, 0%, 0%)'))) => {
    colors = gradientColors('#00FF2C', '#FF0000', n, 2);
    this.planeNum = n;
    const lenScale = 0.77 / n;
    const planeGeo = new THREE.PlaneGeometry();
    planeGeo.applyMatrix4(new THREE.Matrix4().makeTranslation(-1, 0, 0));
    for (let i = 0; i < n; i++) {
      const material = new THREE.MeshBasicMaterial({ color: colors[i], transparent: true, opacity: 0.6, depthTest: false, depthWrite: false });
      const plane = new THREE.Mesh(planeGeo, material);
      plane.name = 'unit' + i;
      plane.rotation.x = -Math.PI / 2;
      plane.scale.set(lenScale - 0.001, 0.375, 1.0);
      plane.position.set(0.282 - lenScale * (i - 0.5), 0.015, 0.142);
      this.planeGroup.add(plane);
    }
  };

  // 清除抽采单元绘制面
  clearPlanes = () => {
    for (let i = 0; i < this.planeNum; i++) {
      const plane = this.planeGroup.getObjectByName(`unit${i}`);
      const label = this.planeGroup.getObjectByName(`planeText${i}`);
      if (plane) this.planeGroup.remove(plane);
      if (label) this.planeGroup.remove(label);
    }
  };
  // 抽采单元内容显示
  setCss3D = () => {
    const obj = this.group.getObjectByName(`unitText`);
    if (!obj) {
      const element = document.getElementById(`gasUnitBox`) as HTMLElement;
      if (element) {
        const gasUnitCSS3D = new CSS3DObject(element);
        gasUnitCSS3D.name = `unitText`;
        gasUnitCSS3D.scale.set(0.0009, 0.0009, 0.0009);
        gasUnitCSS3D.position.set(-0.1, 0.11, 0.05);
        gasUnitCSS3D.lookAt(-0.1, 0.5, 1);
        this.group.add(gasUnitCSS3D);
      }
    }
    for (let i = 0; i < this.planeNum; i++) {
      const lenScale = 0.77 / this.planeNum;
      const label = setTag3D(`抽采单元${i + 1}`, 'gas_unit_text');
      label.scale.set(0.0018, 0.0018, 1); //根据相机渲染范围控制HTML 3D标签尺寸
      label.position.set(0.282 - lenScale * (i + 0.5), 0.015, 0.142);
      label.name = 'planeText' + i;
      this.planeGroup.add(label);
    }
  };
  // 显示或隐藏抽采单元显示内容
  changeCss3D = (isHide) => {
    for (let i = 0; i < this.planeNum; i++) {
      const obj = this.group.getObjectByName(`unitText${i}`);
      if (obj) {
        obj.visible = isHide;
      }
    }
  };
  // 清除抽采单元显示内容
  clearCss3D = () => {
    const obj = this.group.getObjectByName(`unitText`);
    if (obj) this.group.remove(obj);
    const element = document.getElementById(`gasUnitBox`) as HTMLElement;
    if (element) {
      element.remove();
    }
    for (let i = 0; i < this.planeNum; i++) {
      const label = this.planeGroup.getObjectByName(`planeText${i}`);
      if (label) this.planeGroup.remove(label);
    }
  };

  setRenderPass = () => {
    this.bloomLayer.set(this.glob.BLOOM_SCENE);

    const params = {
      bloomStrength: 2.5,
      bloomThreshold: 0,
      bloomRadius: 0,
    };
    const renderScene = new RenderPass(this.model.scene, this.model.camera);

    const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);

    bloomPass.strength = params.bloomStrength;
    bloomPass.radius = params.bloomRadius;
    bloomPass.threshold = params.bloomThreshold;

    this.bloomComposer = new EffectComposer(this.model.renderer);
    this.bloomComposer.renderToScreen = false;
    this.bloomComposer.addPass(renderScene);
    this.bloomComposer.addPass(bloomPass);

    const finalPass = new ShaderPass(
      new THREE.ShaderMaterial({
        uniforms: {
          baseTexture: { value: null },
          bloomTexture: { value: this.bloomComposer.renderTarget2.texture },
        },
        vertexShader: `
      varying vec2 vUv;

      void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
      }`,
        fragmentShader: `uniform sampler2D baseTexture;
      uniform sampler2D bloomTexture;

      varying vec2 vUv;

      void main() {
        gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0, 1.0, 1.0, 0.0 ) * texture2D( bloomTexture, vUv ) );
      }`,
        defines: {},
      }),
      'baseTexture'
    );
    // const gammaCorrection = new ShaderPass(GammaCorrectionShader);
    const outputPass = new OutputPass();
    finalPass.needsSwap = true;

    this.model.renderer.toneMapping = THREE.ReinhardToneMapping;
    this.finalComposer = new EffectComposer(this.model.renderer);
    this.finalComposer.addPass(renderScene);

    this.finalComposer.addPass(outputPass);
    this.finalComposer.addPass(finalPass);

    const effectFXAA = new ShaderPass(FXAAShader);
    effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
    this.finalComposer.addPass(effectFXAA);

    // this.outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), this.model.scene, this.model.camera);
    // this.finalComposer.addPass(this.outlinePass);
  };

  getPositions(num = 40) {
    const curve1 = new THREE.LineCurve3(new THREE.Vector3(-595.2, 0.046, -2.863), new THREE.Vector3(595.2, 0.046, -2.863)); // 前
    const curve2 = new THREE.LineCurve3(new THREE.Vector3(-595.065, 0.014, 1.696), new THREE.Vector3(595.048, 0.014, 1.696)); // 中
    const curve3 = new THREE.LineCurve3(new THREE.Vector3(0.0, 0.0, 190.611), new THREE.Vector3(0.0, 0.0, -190.611)); // 后‘

    const len1 = curve1.getLength();
    const len2 = curve2.getLength();
    const len3 = curve3.getLength();

    const unit = (len1 + len2 + len3) / num;
    const num1 = Math.floor(len1 / unit);
    const num2 = Math.floor(len2 / unit);
    const num3 = Math.floor(len3 / unit);

    const points1 = curve1.getPoints(num1);
    const points2 = curve2.getPoints(num2);
    const points3 = curve3.getPoints(num3);

    this.positions = [points1, points2, points3];
  }

  drawSpheres = () => {
    const _this = this;
    const pointLines = new THREE.Object3D();
    pointLines.name = 'pointLines';
    return new Promise((resolve) => {
      new THREE.TextureLoader().load('/model/img/texture-smoke.png', (texture) => {
        const material = new THREE.PointsMaterial({
          color: '#FFFFFF',
          size: 0.008,
          map: texture,
          opacity: 0.8,
          transparent: true, // 开启透明度
        });

        _this.positions.forEach((position, index) => {
          const geometry = new THREE.BufferGeometry();
          geometry.setFromPoints(position);
          const points = new THREE.Points(geometry, material);
          points.renderOrder = 0;
          index == 0 ? (points.name = 'line_q') : index == 1 ? (points.name = 'line_h') : (points.name = 'line_z');
          let opticalfiber;

          if (index == 0) {
            points.name = 'line_q';
            opticalfiber = this.group.getObjectByName('opticalfiber03');
          } else if (index == 1) {
            points.name = 'line_h';
            opticalfiber = this.group.getObjectByName('opticalfiber01');
          } else {
            points.name = 'line_z';
            opticalfiber = this.group.getObjectByName('opticalfiber02');
          }

          if (opticalfiber) points.applyMatrix4(opticalfiber.matrix);
          const box = new THREE.Box3();
          box.setFromObject(points);
          // points.geometry.boundingBox?.set(box);

          pointLines.add(points);
          points.layers.enable(_this.glob.BLOOM_SCENE);
        });

        this.group.add(pointLines);

        resolve(null);
        texture.dispose();
      });
    });
  };

  darkenNonBloomed(obj) {
    if (obj.isMesh && this.bloomLayer.test(obj.layers) === false) {
      const opacity = obj.material.opacity;
      this.materials[obj.uuid] = obj.material;
      obj.material = this.darkMaterial.clone();
      obj.material.opacity = opacity;
    }
  }

  restoreMaterial(obj) {
    if (this.materials[obj.uuid]) {
      obj.material = this.materials[obj.uuid];
      delete this.materials[obj.uuid];
    }
  }

  resetMesh() {
    // const opticalFiber = this.group.getObjectByName('opticalfiber');
    const optical = this.group?.getObjectByName('optical_fiber_02');
    const optical1 = this.group?.getObjectByName('optical_fiber_01');
    const optical2 = this.group?.getObjectByName('optical_fiber_03');
    if (optical && optical1 && optical2) {
      optical.renderOrder = 100;
      optical1.renderOrder = 100;
      optical2.renderOrder = 100;
      optical.material =
        optical1.material =
        optical2.material =
          new THREE.MeshStandardMaterial({
            color: 0x555555,
            side: THREE.DoubleSide,
            transparent: true,
            opacity: 0.45,
          });
    }
  }

  /* 点击 */
  mousedownModel(rayCaster: THREE.Raycaster) {
    const opticalFiber = this.group.getObjectByName('opticalfiber');
    if (opticalFiber) {
      const intersects = rayCaster?.intersectObjects([...opticalFiber.children]) as THREE.Intersection[];

      // 判断是否点击到视频
      intersects.find((intersect) => {
        const mesh = intersect.object;
        if (mesh.name.startsWith('optical_fiber_')) {
          // outlinePass?.selectedObjects.push(mesh);
          return true;
        }

        return false;
      });
    }
    this.render();
  }

  mouseUpModel() {
    //
  }

  setModalType(modalType) {
    const intakeWind = this.group.getObjectByName('intakewind01');
    const returnWind = this.group.getObjectByName('returnwind');
    if (intakeWind && returnWind) {
      if (modalType === 'workFace1') {
        // 单进单回
        intakeWind.visible = false;
        returnWind.visible = false;
      } else if (modalType === 'workFace2') {
        // 单进双回
        intakeWind.visible = false;
        returnWind.visible = true;
      } else if (modalType === 'workFace3') {
        // 双进单回
        intakeWind.visible = true;
        returnWind.visible = false;
      } else if (modalType === 'workFace4') {
        // 双进双回
        intakeWind.visible = true;
        returnWind.visible = true;
      }
      setModalCenter(this.group);
    }
  }

  mountedThree() {
    return new Promise(async (resolve) => {
      this.model.renderer.sortObjects = true;
      // this.model.camera.position.set(0, 3.1, 500);
      // this.setRenderPass();
      this.model.orbitControls.update();
      this.model.setGLTFModel(['workFace-base', 'workFace-jin', 'workFace-hui'], this.group).then(async () => {
        this.group.name = this.modelName;
        this.group.add(this.planeGroup);
        this.planeGroup.visible = false;
        // this.group.position.set(-0.06, 0.28, 0.07);
        this.group.scale.set(2.5, 2.5, 2.5);
        // this.resetMesh();
        this.getPositions(this.glob.N);
        this.addLight();
        // this.drawSpheres();

        resolve(null);
      });
    });
  }

  destroy() {
    this.model.clearGroup(this.group);
    this.model = null;
    this.group = null;
    this.bloomComposer?.dispose();
    this.finalComposer?.dispose();
  }
}

export default WorkFace;