mky-vent-5/src/views/vent/monitorManager/fiberMonitor/fiber.workFace.threejs.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 { GammaCorrectionShader } from 'three/examples/jsm/shaders/GammaCorrectionShader.js';
import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
// 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();
  bloomComposer: EffectComposer | null = null;
  finalComposer: EffectComposer | null = null;
  outlinePass: OutlinePass | null = null;
  positions: THREE.Vector3[][] = [];
  msgPositions = [];
  bloomLayer = new THREE.Layers();
  darkMaterial = new THREE.MeshBasicMaterial({ color: 'black', transparent: true, side: THREE.DoubleSide });
  materials = {};
  glob = {
    ENTIRE_SCENE: 0,
    BLOOM_SCENE: 1,
    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();

  constructor(model) {
    this.model = model;
    this.group.name = this.modelName;
  }
  addLight() {
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
    directionalLight.position.set(-0.8, 23, 3.9);
    this.group.add(directionalLight);
    directionalLight.target = this.group;

    // gui.add(directionalLight.position, 'x', -10, 20).onChange(function (value) {
    //   directionalLight.position.x = Number(value);
    //   _this.render();
    // });
    // gui.add(directionalLight.position, 'y', -50, 50).onChange(function (value) {
    //   directionalLight.position.y = Number(value);
    //   _this.render();
    // });
    // gui.add(directionalLight.position, 'z', -20, 20).onChange(function (value) {
    //   directionalLight.position.z = Number(value);
    //   _this.render();
    // });
    // const pointLight5 = new THREE.PointLight(0xffffff, 0.8, 120);
    // pointLight5.position.set(-54, 30, 23.8);
    // pointLight5.shadow.bias = 0.05;
    // this.group.add(pointLight5);

    // const pointLight7 = new THREE.PointLight(0xffffff, 1, 1000);
    // pointLight7.position.set(45, 51, -4.1);
    // pointLight7.shadow.bias = 0.05;
    // this.model.scene.add(pointLight7);

    const spotLight = new THREE.SpotLight();
    spotLight.angle = Math.PI / 2;
    spotLight.penumbra = 0;
    spotLight.castShadow = true;
    spotLight.intensity = 1;

    spotLight.shadow.camera.near = 0.5; // default
    spotLight.shadow.focus = 1.2;
    spotLight.shadow.bias = -0.000002;

    spotLight.position.set(-7.19, 199, -68.1);
    // this.group.add(spotLight);

    // gui.add(directionalLight.position, 'x', -10, 20).onChange(function (value) {
    //   directionalLight.position.x = Number(value);
    //   _this.render();
    // });
    // gui.add(directionalLight.position, 'y', -50, 50).onChange(function (value) {
    //   directionalLight.position.y = Number(value);
    //   _this.render();
    // });
    // gui.add(directionalLight.position, 'z', -20, 20).onChange(function (value) {
    //   directionalLight.position.z = Number(value);
    //   _this.render();
    // });

    // gui.add(spotLight.position, 'x', -600, 600).onChange(function (value) {
    //   spotLight.position.x = Number(value);
    //   _this.render();
    // });
    // gui.add(spotLight.position, 'y', -600, 800).onChange(function (value) {
    //   spotLight.position.y = Number(value);
    //   _this.render();
    // });
    // gui.add(spotLight.position, 'z', -500, 1000).onChange(function (value) {
    //   spotLight.position.z = Number(value);
    //   _this.render();
    // });
  }
  // 设置模型位置
  setModalPosition() {
    this.group?.scale.set(22, 22, 22);
    this.group?.position.set(-15, 25, 15);
  }

  monitorData(warningNum = [3, 6], errorNum = [9]) {
    if (this.group) {
      if (warningNum.length > 0)
        warningNum.forEach((i) => {
          const warningMesh = this.group.getObjectByName('location' + i);
          if (warningMesh) {
            const material = (warningMesh as THREE.Mesh).material as THREE.MeshStandardMaterial;
            material.map = this.warningLocationTexture;
            material.emissiveMap = this.warningLocationTexture;
          }
        });
      if (errorNum.length > 0)
        errorNum.forEach((i) => {
          const warningMesh = this.group.getObjectByName('location' + i);
          if (warningMesh) {
            const material = (warningMesh as THREE.Mesh).material as THREE.MeshStandardMaterial;
            material.map = this.errorLocationTexture;
            material.emissiveMap = this.errorLocationTexture;
          }
        });
    }
  }

  addMonitorText(selectData) {
    if (!this.group) {
      return;
    }
    const locationMaterial = new THREE.MeshStandardMaterial({
      map: this.locationTexture,
      emissiveMap: this.locationTexture,
      transparent: true,
      side: THREE.DoubleSide,
    });

    // const locationX = [-8.406, -6.597, -4.787, -2.967, -1.118, 0.692, 2.501, 4.411, 6.211, 8.0];
    for (let i = 1; i <= this.glob.N; i++) {
      if (!this.group.getObjectByName('fiberMeg' + i)) {
        const position = this.msgPositions[i];
        const element = document.getElementById('fiberMeg' + i) as HTMLElement;
        if (element) {
          const mainCSS3D = new CSS3DObject(element);
          mainCSS3D.name = 'fiberMeg' + i;
          mainCSS3D.scale.set(0.008, 0.008, 0.008);
          mainCSS3D.position.set(position.x, -97.8, position.z);
          const lookAtPosition = this.model.camera.position;
          mainCSS3D.lookAt(lookAtPosition.x, lookAtPosition.y, lookAtPosition.z);
          this.group.add(mainCSS3D);
        }
        // const geometry = new THREE.PlaneGeometry(1, 0.9);
        // const location = new THREE.Mesh(geometry, locationMaterial);
        // location.scale.set(0.3, 0.3, 0.3);
        // location.name = 'location' + i;
        // location.position.set(locationX[i - 1], 1.384, position.z);
        // location.layers.enable(this.glob.ENTIRE_SCENE);

        // this.group.add(location);
      }
    }
  }

  render() {
    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();
      this.model.css3dRender?.render(this.model.scene as THREE.Scene, this.model.camera as THREE.PerspectiveCamera);
    }
  }

  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);
    finalPass.needsSwap = true;

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

    this.finalComposer.addPass(gammaCorrection);
    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(-0.818, 0.002, 0.363), new THREE.Vector3(0.722, 0.002, 0.363)); // 前
    const curve2 = new THREE.LineCurve3(new THREE.Vector3(-0.818, 0.002, -0.459), new THREE.Vector3(0.718, -0.002, -0.459)); // 中
    const curve3 = new THREE.LineCurve3(new THREE.Vector3(0.345, 0.008, 0.329), new THREE.Vector3(0.345, 0.008, -0.43)); // 后

    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];

    this.msgPositions = [curve1.getSpacedPoints(10), curve2.getSpacedPoints(10), curve3.getSpacedPoints(10)];
  }

  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) => {
        texture.encoding = THREE.sRGBEncoding;
        const material = new THREE.PointsMaterial({
          color: '#FFFFAF',
          size: 0.03,
          map: texture,
          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');
          pointLines.add(points);
          points.layers.enable(_this.glob.BLOOM_SCENE);
        });

        this.group.add(pointLines);

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

  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 = opticalFiber?.getObjectByName('optical_fiber_02');
    const optical1 = opticalFiber?.getObjectByName('optical_fiber_01');
    const optical2 = opticalFiber?.getObjectByName('optical_fiber_03');
    if (optical && optical1 && optical2) {
      optical.renderOrder = 9;
      optical1.renderOrder = 9;
      optical2.renderOrder = 9;
      optical.material =
        optical1.material =
        optical2.material =
          new THREE.MeshStandardMaterial({
            color: 0x555555,
            side: THREE.DoubleSide,
            transparent: true,
            opacity: 0.15,
          });
    }
  }

  /* 点击 */
  mousedownModel(rayCaster: THREE.Raycaster) {
    // const outlinePass = this.outlinePass;
    // const selectedObjects = [];
    // outlinePass.selectedObjects = selectedObjects;
    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() {
    //
  }

  mountedThree() {
    this.locationTexture = new THREE.TextureLoader().load('/model/img/location.png');
    this.warningLocationTexture = new THREE.TextureLoader().load('/model/img/location.png');
    this.errorLocationTexture = new THREE.TextureLoader().load('/model/img/location.png');
    this.locationTexture.encoding = this.warningLocationTexture.encoding = this.warningLocationTexture.encoding = THREE.sRGBEncoding;

    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.setModel(['workFace']).then(async (gltf) => {
        this.group = gltf[0];
        this.group.position.set(0, 1, 0);
        this.group.scale.set(2, 2, 2);
        this.resetMesh();
        this.getPositions(this.glob.N);
        this.addLight();
        this.drawSpheres();
        resolve(null);
      });

      // window.onresize = function () {
      //   const width = window.innerWidth;
      //   const height = window.innerHeight;

      //   model.camera.aspect = width / height;
      //   model.camera.updateProjectionMatrix();

      //   model.renderer.setSize(width, height);

      //   bloomComposer.setSize(width, height);
      //   finalComposer.setSize(width, height);

      //   render();
      // };
    });
  }

  destroy() {
    this.model.clearGroup(this.group);
    this.model = null;
    this.group = null;
  }
}

export default WorkFace;