mky-vent-5/src/views/vent/monitorManager/fiberMonitor/fiber.ds.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 { 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 GrottoFiber {
  model;
  modelName = 'grotto';
  group: THREE.Object3D = new THREE.Object3D();
  bloomComposer: EffectComposer | null = null;
  finalComposer: EffectComposer | null = null;
  positions: THREE.Vector3[] = [];
  msgPositions: THREE.Vector3[] = [];
  bloomLayer = new THREE.Layers();
  darkMaterial = new THREE.MeshBasicMaterial({ color: 'black', transparent: true, side: THREE.DoubleSide });
  materials = {};
  glob = {
    ENTIRE_SCENE: 0,
    BLOOM_SCENE: 1,
    N: 11,
  };
  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 _this = this;
    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;
          }
        });
    }
  }

  addBeltText() {
    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,
      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);
  };

  getPositions(num = 40) {
    const curve1 = new THREE.LineCurve3(new THREE.Vector3(-9.676, 0.814, 0.019), new THREE.Vector3(9.68, 0.814, 0.019));
    // const curve2 = new THREE.LineCurve3(new THREE.Vector3(-7.758, -0.462, -0.275), new THREE.Vector3(20.758, 2.037, -0.275));

    // const len1 = curve1.getLength();
    // const len2 = curve2.getLength();

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

    const points1 = curve1.getPoints(num);
    this.msgPositions = curve1.getPoints(this.glob.N);
    // const points2 = curve2.getPoints(num2);

    this.positions = [...points1];
  }

  drawSpheres = () => {
    const _this = this;
    return new Promise((resolve) => {
      new THREE.TextureLoader().load('/model/img/texture-smoke.png', (texture) => {
        texture.encoding = THREE.sRGBEncoding;
        const geometry = new THREE.BufferGeometry();
        geometry.setFromPoints(_this.positions);
        const material = new THREE.PointsMaterial({
          color: '#FFFFAF',
          size: 0.13,
          map: texture,
          transparent: true, // 开启透明度
        });
        const points = new THREE.Points(geometry, material);
        points.renderOrder = 0;
        _this.group.add(points);
        points.layers.enable(_this.glob.BLOOM_SCENE);
        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];
    }
  }

  /* 点击 */
  mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
    // 判断是否点击到视频
    intersects.find((intersect) => {
      const mesh = intersect.object;
      if (mesh.name === 'player1') {
        return true;
      }
      return false;
    });
  }

  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.orbitControls.addEventListener('change', _this.render.bind(_this));
      this.model.setModel(['laneway']).then(async (gltf) => {
        this.group = gltf[0];
        this.group.position.set(0, 0.7, 0);
        (this.group as THREE.Group).remove(this.group.getObjectByName('mesh001'));
        const optical = this.group.getObjectByName('optical_fiber_');
        if (optical) {
          optical.renderOrder = 9;
          optical.material = new THREE.MeshBasicMaterial({
            color: 0x555555,
            side: THREE.DoubleSide,
            transparent: true,
            opacity: 0.15,
          });
        }

        this.getPositions();
        this.addLight();
        this.drawSpheres().then(() => {
          // this.render();
        });
        this.addBeltText();
        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 GrottoFiber;