mky-vent-base/src/views/vent/monitorManager/beltTunMonitor/beltTun.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 { 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 BeltFace {
  model;
  modelName = 'beltTun';
  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 _this = this;
    const directionalLight = new THREE.DirectionalLight(0xffffff, 3);
    directionalLight.position.set(-98, 183, -131);
    this.group.add(directionalLight);
    directionalLight.target = this.group;

    // gui.add(directionalLight.position, 'x', -500, 500).onChange(function (value) {
    //   directionalLight.position.x = Number(value);
    //   _this.render();
    // });
    // gui.add(directionalLight.position, 'y', -500, 500).onChange(function (value) {
    //   directionalLight.position.y = Number(value);
    //   _this.render();
    // });
    // gui.add(directionalLight.position, 'z', -500, 500).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);
  }

  render() {
    // 无发光
    if (this.model && this.model.scene.getObjectByName(this.modelName)) {
      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();
    //   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.colorSpace = THREE.SRGBColorSpace;
        const material = new THREE.PointsMaterial({
          color: '#FFFFFF',
          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);
        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];
    }
  }

  /* 点击 */
  mousedownModel(rayCaster: THREE.Raycaster) {
    debugger;
    // 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() {
    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.setGLTFModel(['laneway']).then(async (gltf) => {
        this.group = gltf[0];
        this.group.name = this.modelName;
        this.group.position.set(-3.5, 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();
        resolve(null);
      });
    });
  }

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

export default BeltFace;