gas-injection/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, gradientColors } from '/@/utils/threejs/util';
import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import { number } from 'vue-types';

// 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();
    // });
  }
  setControls = () => {
    if (this.model && this.model.orbitControls) {
      this.model.orbitControls.panSpeed = 0.5;
      this.model.orbitControls.rotateSpeed = 0.5;
      this.model.orbitControls.maxPolarAngle = Math.PI / 3;
      this.model.orbitControls.minPolarAngle = Math.PI / 4;
      this.model.orbitControls.minAzimuthAngle = -Math.PI / 3;
      this.model.orbitControls.maxAzimuthAngle = Math.PI / 4;
    }
  };

  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.planeGroup.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() {
    //
  }
  setThreePlane() {
    const gltfModal = this.group.getObjectByName('workFace');
    const PouMian01 = gltfModal?.getObjectByName('PouMian01');
    const DiXing = PouMian01?.getObjectByName('DiXing');
    // 绘制采空区三带
    // new THREE.Vector3(934.695, -141.85, -365.375),
    // new THREE.Vector3(934.695, 623.933, -365.375),
    //-365.355
    const material1 = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, vertexColors: true });
    const offeset = 10;
    const yellowLen = offeset * 8;
    // 红=》红
    const curveRed = new THREE.CatmullRomCurve3([new THREE.Vector3(-477.721, -141.83, -365.375), new THREE.Vector3(-477.721, 623.933, -365.375)]);
    const curve0 = new THREE.CatmullRomCurve3([
      new THREE.Vector3(-231.811 - 150, -141.83, -365.375),
      new THREE.Vector3(-121.899 - 150, 67.201, -365.375),
      new THREE.Vector3(-242.441 - 150, 408.812, -365.375),
      new THREE.Vector3(-179.811 - 150, 620.836, -365.375),
    ]);
    const pointsRed = curveRed.getPoints(80);
    const points0 = curve0.getPoints(80);
    const newPointRed: number[] = [];
    const normalsRed: number[] = [];
    const colorsRed: number[] = [];
    for (let i = 0; i < 80; i++) {
      newPointRed.push(pointsRed[i].x, pointsRed[i].y, pointsRed[i].z);
      newPointRed.push(points0[i].x, points0[i].y, points0[i].z);
      newPointRed.push(points0[i + 1].x, points0[i + 1].y, points0[i + 1].z);
      newPointRed.push(points0[i + 1].x, points0[i + 1].y, points0[i + 1].z);
      newPointRed.push(pointsRed[i + 1].x, pointsRed[i + 1].y, pointsRed[i + 1].z);
      newPointRed.push(pointsRed[i].x, pointsRed[i].y, pointsRed[i].z);
      normalsRed.push(0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1);
      colorsRed.push(1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0);
    }
    const geometryRed = new THREE.BufferGeometry();
    geometryRed.setAttribute('position', new THREE.BufferAttribute(new Float32Array(newPointRed), 3));
    geometryRed.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(normalsRed), 3));
    geometryRed.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colorsRed), 3));
    const meshRed = new THREE.Mesh(geometryRed, material1);
    meshRed.position.setZ(-1);
    DiXing?.add(meshRed);

    // 红=》黄

    const curve1 = new THREE.CatmullRomCurve3([
      new THREE.Vector3(-231.811 - yellowLen, -141.83, -365.375),
      new THREE.Vector3(-121.899 - yellowLen, 67.201, -365.375),
      new THREE.Vector3(-242.441 - yellowLen, 408.812, -365.375),
      new THREE.Vector3(-179.811 - yellowLen, 620.836, -365.375),
    ]);

    const points1 = curve1.getPoints(80);
    const newPoints0: number[] = [];
    const normals0: number[] = [];
    const colors0: number[] = [];
    for (let i = 0; i < 80; i++) {
      newPoints0.push(points0[i].x, points0[i].y, points0[i].z);
      newPoints0.push(points1[i].x, points1[i].y, points1[i].z);
      newPoints0.push(points1[i + 1].x, points1[i + 1].y, points1[i + 1].z);
      newPoints0.push(points1[i + 1].x, points1[i + 1].y, points1[i + 1].z);
      newPoints0.push(points0[i + 1].x, points0[i + 1].y, points0[i + 1].z);
      newPoints0.push(points0[i].x, points0[i].y, points0[i].z);
      normals0.push(0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1);
      colors0.push(1, 0, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0);
    }
    const geometry0 = new THREE.BufferGeometry();
    geometry0.setAttribute('position', new THREE.BufferAttribute(new Float32Array(newPoints0), 3));
    geometry0.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(normals0), 3));
    geometry0.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colors0), 3));
    geometry0.computeBoundingBox();

    // const material1 = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, color: '#fff' });
    const mesh0 = new THREE.Mesh(geometry0, material1);
    mesh0.name = 'yellow';
    mesh0.position.setZ(-1);
    DiXing?.add(mesh0);
    // 黄=》黄
    const curveYellow1 = new THREE.CatmullRomCurve3([
      new THREE.Vector3(784.664 - yellowLen, 623.933, -365.355),
      new THREE.Vector3(167.212 - yellowLen, 450.517, -365.355),
      new THREE.Vector3(7.587 - yellowLen, 262.225, -365.355),
      new THREE.Vector3(426.499 - yellowLen, 31.416, -365.355),
      new THREE.Vector3(261.665 - yellowLen, -139.495, -365.355),
    ]);
    const curveYellow2 = new THREE.CatmullRomCurve3([
      new THREE.Vector3(-179.811 - yellowLen, 620.836, -365.375),
      new THREE.Vector3(-242.441 - yellowLen, 408.812, -365.375),
      new THREE.Vector3(-121.899 - yellowLen, 67.201, -365.375),
      new THREE.Vector3(-231.811 - yellowLen, -141.83, -365.375),
    ]);
    const pointsYellow1 = curveYellow1.getPoints(80);
    const pointsYellow2 = curveYellow2.getPoints(80);
    const newPointYellow: number[] = [];
    const normalsYellow: number[] = [];
    const colorsYellow: number[] = [];
    for (let i = 0; i < 80; i++) {
      newPointYellow.push(pointsYellow1[i].x, pointsYellow1[i].y, pointsYellow1[i].z);
      newPointYellow.push(pointsYellow2[i].x, pointsYellow2[i].y, pointsYellow2[i].z);
      newPointYellow.push(pointsYellow2[i + 1].x, pointsYellow2[i + 1].y, pointsYellow2[i + 1].z);
      newPointYellow.push(pointsYellow2[i + 1].x, pointsYellow2[i + 1].y, pointsYellow2[i + 1].z);
      newPointYellow.push(pointsYellow1[i + 1].x, pointsYellow1[i + 1].y, pointsYellow1[i + 1].z);
      newPointYellow.push(pointsYellow1[i].x, pointsYellow1[i].y, pointsYellow1[i].z);
      normalsYellow.push(0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1);
      colorsYellow.push(1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0);
    }
    const geometryYellow = new THREE.BufferGeometry();
    geometryYellow.setAttribute('position', new THREE.BufferAttribute(new Float32Array(newPointYellow), 3));
    geometryYellow.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(normalsYellow), 3));
    geometryYellow.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colorsYellow), 3));
    const meshYellow = new THREE.Mesh(geometryYellow, material1);
    meshYellow.position.setZ(-1);
    DiXing?.add(meshYellow);

    // 蓝 =》 蓝
    const curve3 = new THREE.CatmullRomCurve3([
      new THREE.Vector3(784.664, 623.933, -365.355),
      new THREE.Vector3(167.212, 450.517, -365.355),
      new THREE.Vector3(7.587, 262.225, -365.355),
      new THREE.Vector3(426.499, 31.416, -365.355),
      new THREE.Vector3(261.665, -139.495, -365.355),
    ]);

    const points = curve3.getPoints(80);
    points.unshift(new THREE.Vector3(934.695, 623.933, -365.375));
    points.unshift(new THREE.Vector3(934.695, -141.85, -365.375));
    points.push(new THREE.Vector3(934.695, -141.85, -365.375));
    const newPoints: THREE.Vector2[] = [];
    for (let i = 0; i < points.length; i++) {
      const point = points[i];
      newPoints.push(new THREE.Vector2(point.x, point.y));
    }
    const shape = new THREE.Shape(newPoints);
    const geometry = new THREE.ShapeGeometry(shape);

    const material = new THREE.MeshBasicMaterial({ side: THREE.BackSide, color: '#00F' });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.setZ(-366.485);
    DiXing?.add(mesh);

    // 黄色-》蓝色
    const curve2 = new THREE.CatmullRomCurve3([
      new THREE.Vector3(784.664 - yellowLen, 623.933, -365.355),
      new THREE.Vector3(167.212 - yellowLen, 450.517, -365.355),
      new THREE.Vector3(7.587 - yellowLen, 262.225, -365.355),
      new THREE.Vector3(426.499 - yellowLen, 31.416, -365.355),
      new THREE.Vector3(261.665 - yellowLen, -139.495, -365.355),
    ]);

    const curve4 = new THREE.CatmullRomCurve3([
      new THREE.Vector3(784.664, 623.933, -365.355),
      new THREE.Vector3(167.212, 450.517, -365.355),
      new THREE.Vector3(7.587, 262.225, -365.355),
      new THREE.Vector3(426.499, 31.416, -365.355),
      new THREE.Vector3(261.665, -139.495, -365.355),
    ]);

    const points2 = curve2.getPoints(80);
    const points3 = curve4.getPoints(80);
    const newPoints1: number[] = [];
    const normals: number[] = [];
    const colors: number[] = [];
    for (let i = 0; i < 80; i++) {
      newPoints1.push(points2[i].x, points2[i].y, points2[i].z);
      newPoints1.push(points3[i].x, points3[i].y, points3[i].z);
      newPoints1.push(points3[i + 1].x, points3[i + 1].y, points3[i + 1].z);
      newPoints1.push(points3[i + 1].x, points3[i + 1].y, points3[i + 1].z);
      newPoints1.push(points2[i + 1].x, points2[i + 1].y, points2[i + 1].z);
      newPoints1.push(points2[i].x, points2[i].y, points2[i].z);
      normals.push(0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1);
      colors.push(1, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 1, 1, 0);
    }
    const geometry1 = new THREE.BufferGeometry();
    geometry1.setAttribute('position', new THREE.BufferAttribute(new Float32Array(newPoints1), 3));
    geometry1.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(normals), 3));
    geometry1.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
    geometry1.computeBoundingBox();
    const mesh1 = new THREE.Mesh(geometry1, material1);
    mesh1.name = 'blue';
    mesh1.position.setZ(-1);
    DiXing?.add(mesh1);
  }
  setModalType(modalType) {
    // debugger;
    const gltfModal = this.group.getObjectByName('workFace');
    const workFace1 = gltfModal?.getObjectByName('YiJinYiHui');
    const workFace2 = gltfModal?.getObjectByName('LiangJinYiHui');
    const workFace3 = gltfModal?.getObjectByName('LiangJinLiangHui');
    if (workFace1 && workFace2 && workFace3) {
      if (modalType === 'workFace1') {
        // 单进单回
        workFace1.visible = true;
        workFace2.visible = false;
        workFace3.visible = false;
      } else if (modalType === 'workFace3') {
        // 双进单回
        workFace1.visible = false;
        workFace2.visible = true;
        workFace3.visible = false;
      } else if (modalType === 'workFace4') {
        workFace1.visible = false;
        workFace2.visible = false;
        workFace3.visible = true;
      }
    }
  }

  mountedThree() {
    return new Promise(async (resolve) => {
      this.model.renderer.sortObjects = true;
      this.model.orbitControls.update();
      this.model.setGLTFModel('workFace').then(async (gltf) => {
        const gltfModal = gltf[0];
        this.group = gltfModal;
        this.group.name = this.modelName;
        setModalCenter(this.group);
        this.group.scale.set(2.5, 2.5, 2.5);
        // this.resetMesh();
        this.getPositions(this.glob.N);
        this.addLight();
        this.setThreePlane();
        this.setControls();
        // 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;