mky-vent-base/src/utils/threejs/useThree.ts

import * as THREE from 'three';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
// import gsap from 'gsap';
import ResourceTracker from '/@/utils/threejs/ResourceTracker.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
import Stats from 'three/examples/jsm/libs/stats.module.js';
import { useModelStore } from '/@/store/modules/threejs';
import { TWEEN } from 'three/examples/jsm/libs/tween.module.min.js';
// import * as dat from 'dat.gui';
// const gui = new dat.GUI();
// gui.domElement.style = 'position:absolute;top:10px;left:10px;z-index:99999999999999';

class UseThree {
  stats: Stats | null = null; // 帧
  canvasContainer: HTMLCanvasElement | null; //canvas 容器
  CSSCanvasContainer: HTMLCanvasElement | null = null; // css canvas 容器
  camera: THREE.PerspectiveCamera | null = null; // 相机
  scene: THREE.Scene | null = null;
  renderer: THREE.WebGLRenderer | null = null;
  renderEnabled = true;
  css3dRender: CSS3DRenderer | null = null;
  css2dRender: CSS2DRenderer | null = null;
  orbitControls: OrbitControls | null = null;
  animationAction: THREE.AnimationAction | null = null;
  clock: THREE.Clock | null = new THREE.Clock(); // 计时器
  timeoutId: NodeJS.Timeout | null = null;
  animationId = 0;
  spriteText: THREE.Sprite | null = null;
  mouse = new THREE.Vector2();
  rayCaster: THREE.Raycaster | null = null;
  animations: THREE.AnimationClip[] = [];
  mixers: THREE.AnimationMixer[] = [];
  renderT = 1 / 60;
  timeS = 0;
  resourceTracker: ResourceTracker | null = null;
  track: any = null;
  composer; //后期
  timeOut: NodeJS.Timeout | null = null; //

  constructor(canvasSelector, css3Canvas?, css2Canvas?) {
    this.animationId = 0;
    this.canvasContainer = document.querySelector(canvasSelector);
    //初始化
    this.init(css3Canvas, css2Canvas);
    // this.animate();
    window.addEventListener('resize', this.resizeRenderer.bind(this));
    // 添加滚动事件，鼠标滚动模型执行动画
    // window.addEventListener('wheel', this.wheelRenderer.bind(this));

    // this.canvasContainer?.appendChild(gui.domElement);
  }
  init(css3Canvas?, css2Canvas?) {
    // 初始化场景
    this.initScene();
    // 初始化环境光
    // this.initLight();
    // 初始化相机
    this.initCamera();
    //初始化渲染器
    this.initRenderer();
    // 初始化控制器
    this.initControles();
    if (css3Canvas) {
      this.initCSS3Renderer(css3Canvas);
    }
    if (css2Canvas) {
      this.initCSS2Renderer(css2Canvas);
    }
    // this.setTestPlane();
    this.rayCaster = new THREE.Raycaster();
    // this.createStats();
    // this.removeSawtooth();
  }

  createStats() {
    this.stats = Stats();
    this.stats?.setMode(0);
    this.stats.domElement.style = 'position: absolute; top: 300px';
    this.canvasContainer?.appendChild(this.stats.domElement);
  }

  initScene() {
    this.scene = new THREE.Scene();
    // const axesHelper = new THREE.AxesHelper(100);
    // this.scene?.add(axesHelper);
    // const size = 1000;
    // const divisions = 10;
    // const gridHelper = new THREE.GridHelper(size, divisions);
    // this.scene?.add(gridHelper);
  }

  initLight() {
    // const light = new THREE.AmbientLight(0xffffff, 1);
    // light.position.set(0, 1000, 1000);
    // (this.scene as THREE.Scene).add(light);
  }

  initCamera() {
    this.camera = new THREE.PerspectiveCamera(50, this.canvasContainer.clientWidth / this.canvasContainer.clientHeight, 0.0000001, 1000);
    this.camera.layers.enableAll();
    //
    // const helper = new THREE.CameraHelper(this.camera);
    // this.scene?.add(helper);
    // gui.add(this.camera.position, 'x', 0.00001, 10000);
    // gui.add(this.camera.position, 'y', 0.00001, 10000);
    // gui.add(this.camera.position, 'z', 0.00001, 10000);
    // gui.add(this.camera, 'near', 0.01, 1).step(0.01);
    // gui.add(this.camera, 'far', 10, 100000);
    // gui.add(this.camera, 'fov', 0, 180);
  }

  initRenderer() {
    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true }) as THREE.WebGLRenderer;
    // 设置屏幕像素比
    this.renderer?.setPixelRatio(window.devicePixelRatio);
    // 设置渲染的尺寸
    this.renderer?.setSize(this.canvasContainer.clientWidth, this.canvasContainer.clientHeight);
    // 色调映射
    this.renderer.toneMapping = THREE.ACESFilmicToneMapping;

    this.renderer.outputEncoding = THREE.sRGBEncoding;
    // this.renderer.sortObjects = false;

    this.renderer.shadowMap.enabled = true;

    // 曝光程度
    this.renderer.toneMappingExposure = 1;

    this.renderer.setClearAlpha(0);

    // this.renderer.physicallyCorrectLights = true;
    // this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;

    this.canvasContainer?.appendChild(this.renderer.domElement);
  }

  initCSS3Renderer(cssCanvas) {
    this.CSSCanvasContainer = document.querySelector(cssCanvas);
    if (this.CSSCanvasContainer) {
      this.css3dRender = new CSS3DRenderer() as CSS3DRenderer;
      this.css3dRender.setSize(this.canvasContainer.clientWidth, this.canvasContainer.clientHeight);
      this.CSSCanvasContainer?.appendChild(this.css3dRender.domElement);
      this.css3dRender.render(this.scene as THREE.Scene, this.camera as THREE.PerspectiveCamera);
      // this.css3dRender.domElement.style.pointerEvents = 'none';
      // this.orbitControls = new OrbitControls(this.camera as THREE.Camera, this.css3dRender?.domElement) as OrbitControls;
      // this.orbitControls.update();
    }
  }

  initCSS2Renderer(cssCanvas) {
    this.CSSCanvasContainer = document.querySelector(cssCanvas);
    if (this.CSSCanvasContainer) {
      this.css2dRender = new CSS2DRenderer();
      this.css2dRender.setSize(this.canvasContainer.clientWidth, this.canvasContainer.clientHeight);
      this.CSSCanvasContainer?.appendChild(this.css2dRender.domElement);
      this.css2dRender.render(this.scene as THREE.Scene, this.camera as THREE.PerspectiveCamera);

      // this.orbitControls = new OrbitControls(this.camera as THREE.Camera, this.css2dRender?.domElement) as OrbitControls;
      // this.orbitControls.update();
      // this.css2dRender.domElement.style.pointerEvents = 'none';
    }
  }

  initControles() {
    this.orbitControls = new OrbitControls(this.camera as THREE.Camera, this.renderer?.domElement) as OrbitControls;
    // this.orbitControls.update();
    // this.orbitControls.minDistance = 1;
    // this.orbitControls.maxDistance = 100;
    // this.orbitControls.enableDamping = true;
  }

  setGLTFModel(modalNames, group = null) {
    window['startTime'] = new Date().getTime();
    const modelStore = useModelStore();
    return new Promise(async (resolve, reject) => {
      try {
        const gltfLoader = new GLTFLoader();
        const dracoLoader = new DRACOLoader();
        dracoLoader.setDecoderPath('/model/draco/gltf/');
        dracoLoader.setDecoderConfig({ type: 'js' }); //使用兼容性强的draco_decoder.js解码器
        dracoLoader.preload();
        gltfLoader.setDRACOLoader(dracoLoader);
        gltfLoader.setPath('/model/glft/');

        const db = window['CustomDB'];
        const resolvePromise: Promise<any>[] = [];

        let modalNameArr = Object.prototype.toString.call(modalNames) === '[object Array]' ? modalNames : [modalNames];
        let len = modalNameArr.length;

        for (let i = 0; i < len; i++) {
          resolvePromise[i] = new Promise(async (childResolve, reject) => {
            try {
              // 解析模型
              const modalNameStr = modalNameArr[i];
              let data = modelStore.modelArr.get(modalNameStr) || null;
              let modalValue;
              if (!data) {
                const modalArr = await db.modal.where('modalName').equals(modalNameStr).toArray();
                if (modalArr.length > 0) modalValue = modalArr[0].modalVal;
              } else {
                modalValue = data.modalVal;
              }

              if (modalValue) {
                gltfLoader.parse(
                  modalValue,
                  '/model/glft/',
                  (gltf) => {
                    const object = gltf.scene;
                    // setModalCenter(object);
                    object.traverse((obj) => {
                      if (obj instanceof THREE.Mesh) {
                        obj.material.emissiveIntensity = 1;
                        obj.material.emissiveMap = obj.material.map;
                        obj.material.blending = THREE.CustomBlending;

                        if (obj.material.opacity < 1) {
                          obj.material.transparent = true;
                        }
                        if (obj.material.map) {
                          obj.material.map.encoding = THREE.sRGBEncoding;
                          obj.material.map.flipY = false;
                          obj.material.map.anisotropy = 1;
                        }
                        if (obj.material.emissiveMap) {
                          obj.material.emissiveMap.encoding = THREE.sRGBEncoding;
                          obj.material.emissiveMap.flipY = false;
                        }

                        if (obj.material.map || obj.material.emissiveMap) {
                          obj.material.needsUpdate = true;
                        }

                        // if (envMap) {
                        //   obj.material.envMap = envMap;
                        //   obj.material.envMapIntensity = 1;
                        // }
                        // obj.renderOrder = 1;
                      }
                    });
                    object.animations = gltf.animations;
                    object.name = modalNameStr;
                    group?.add(object);
                    childResolve(object);
                  },
                  (err) => {
                    console.log(err);
                  }
                );
              }
            } catch (error) {
              console.log(error);
              reject();
            }
          });
        }
        Promise.all(resolvePromise).then((objects) => {
          dracoLoader.dispose();
          resolve(objects);
        });
      } catch (error) {
        reject('加载模型出错');
      }
    });
  }

  setFBXModel(modalNames, group = null) {
    window['startTime'] = new Date().getTime();
    const modelStore = useModelStore();
    return new Promise(async (resolve, reject) => {
      try {
        const fbxLoader = new FBXLoader();

        fbxLoader.setPath('/model/fbx/');

        const db = window['CustomDB'];
        const resolvePromise: Promise<any>[] = [];

        let modalNameArr = Object.prototype.toString.call(modalNames) === '[object Array]' ? modalNames : [modalNames];
        let len = modalNameArr.length;

        for (let i = 0; i < len; i++) {
          resolvePromise[i] = new Promise(async (childResolve, reject) => {
            try {
              // 解析模型
              let modalValue;
              const modalNameStr = modalNameArr[i];
              let data = modelStore.modelArr.get(modalNameStr) || null;
              if (!data) {
                const modalArr = await db.modal.where('modalName').equals(modalNameStr).toArray();
                if (modalArr.length > 0) modalValue = modalArr[0].modalVal;
              } else {
                modalValue = data.modalVal;
              }
              if (modalValue) {
                const object = fbxLoader.parse(modalValue, '/model/fbx/');
                // const object = fbx.scene;
                // setModalCenter(object);
                if (object) {
                  object.traverse((obj) => {
                    if (obj instanceof THREE.Mesh) {
                      obj.material.emissiveIntensity = 1;
                      obj.material.emissiveMap = obj.material.map;
                      obj.material.blending = THREE.CustomBlending;
                      if (obj.material.opacity < 1) {
                        obj.material.transparent = true;
                      }
                      if (obj.material.map) {
                        obj.material.map.encoding = THREE.sRGBEncoding;
                        obj.material.map.flipY = false;
                        obj.material.map.anisotropy = 1;
                      }
                      if (obj.material.emissiveMap) {
                        obj.material.emissiveMap.encoding = THREE.sRGBEncoding;
                        obj.material.emissiveMap.flipY = false;
                      }

                      if (obj.material.map || obj.material.emissiveMap) {
                        obj.material.needsUpdate = true;
                      }

                      // if (envMap) {
                      //   obj.material.envMap = envMap;
                      //   obj.material.envMapIntensity = 1;
                      // }
                      // obj.renderOrder = 1;
                    }
                  });
                  object.animations = object.animations;
                  object.name = modalNameStr;
                  group?.add(object);
                  childResolve(object);
                }
              }
            } catch (error) {
              console.log(error);
              reject();
            }
          });
        }

        Promise.all(resolvePromise).then((objects) => {
          resolve(objects);
        });
      } catch (error) {
        reject('加载模型出错');
      }
    });
  }

  setTestPlane() {
    const plane = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), new THREE.MeshPhongMaterial({ color: 0x999999, specular: 0x101010 }));
    plane.rotation.x = -Math.PI / 2;
    plane.position.y = 0.03;
    plane.receiveShadow = true;
    this.scene?.add(plane);
  }

  removeSawtooth() {
    this.composer = new EffectComposer(this.renderer as THREE.WebGLRenderer);
    const FXAAShaderPass = new ShaderPass(FXAAShader);
    FXAAShaderPass.uniforms['resolution'].value.set(1 / this.canvasContainer.clientWidth, 1 / this.canvasContainer.clientHeight);
    FXAAShaderPass.renderToScreen = true;
    this.composer.addPass(FXAAShaderPass);
  }

  /* 场景环境背景 */
  setEnvMap(hdr) {
    const pmremGenerator = new THREE.PMREMGenerator(this.renderer as THREE.WebGLRenderer); // 使用hdr作为背景色
    pmremGenerator.compileEquirectangularShader();
    new THREE.TextureLoader().setPath('/model/hdr/').load(hdr + '.jpeg', (texture) => {
      texture.encoding = THREE.sRGBEncoding;
      texture.mapping = THREE.EquirectangularReflectionMapping;
      const envMap = pmremGenerator.fromEquirectangular(texture).texture;
      (this.scene as THREE.Scene).environment = envMap;
      pmremGenerator.dispose();
    });
  }

  render() {
    this.startAnimation();
    this.orbitControls?.update();
    this.camera?.updateMatrixWorld();
    // this.composer?.render();
    this.css3dRender?.render(this.scene as THREE.Scene, this.camera as THREE.PerspectiveCamera);
    this.css2dRender?.render(this.scene as THREE.Scene, this.camera as THREE.PerspectiveCamera);
    this.renderer?.render(this.scene as THREE.Object3D, this.camera as THREE.Camera);
  }

  timeRender() {
    //设置为可渲染状态
    this.renderEnabled = true;
    //清除上次的延迟器
    if (this.timeOut) {
      clearTimeout(this.timeOut);
    }
    this.timeOut = setTimeout(() => {
      this.renderEnabled = false;
    }, 3000);
  }

  /* 漫游 */
  startMY() {}
  /* 初始动画 */
  startAnimation() {}

  renderAnimationScene() {}

  animate() {
    if (this.animationId != -1) {
      this.animationId = requestAnimationFrame(this.animate.bind(this));
      // const T = this.clock?.getDelta() || 0;
      // this.timeS = this.timeS + T;
      // if (this.timeS > this.renderT) {
      //   this.stats?.update();
      //   // this.renderAnimationScene();
      //   if (this.renderEnabled) {
      //     this.render();
      //   }
      //   this.timeS = 0;
      // }
      this.stats?.update();
      TWEEN.update();
      // this.renderAnimationScene();
      if (this.renderEnabled) {
        this.render();
      }
    }
  }

  resizeRenderer() {
    // 更新相机比例
    (this.camera as THREE.PerspectiveCamera).aspect = this.canvasContainer.clientWidth / this.canvasContainer.clientHeight;
    // 刷新相机矩阵
    this.camera?.updateProjectionMatrix();
    // 设置场景尺寸
    this.renderer?.setSize(this.canvasContainer.clientWidth, this.canvasContainer.clientHeight);
    this.css3dRender?.setSize(this.canvasContainer.clientWidth, this.canvasContainer.clientHeight);
    this.css2dRender?.setSize(this.canvasContainer.clientWidth, this.canvasContainer.clientHeight);
  }

  wheelRenderer(e: WheelEvent) {
    const timeScale = e.deltaY > 0 ? 1 : -1;
    this.animationAction?.setEffectiveTimeScale(timeScale);
    (this.animationAction as THREE.AnimationAction).paused = false;
    this.animationAction?.play();
    if (this.timeoutId) {
      clearTimeout(this.timeoutId);
    }
    this.timeoutId = setTimeout(() => {
      this.animationAction?.halt(0.5);
    }, 500);
  }

  clearGroup(group) {
    const clearCache = (item) => {
      item.geometry?.dispose();
      item.material?.dispose();
    };
    const removeObj = (obj) => {
      if (obj?.children && obj?.children.length > 0) {
        for (let i = obj?.children.length - 1; i >= 0; i--) {
          const item = obj?.children[i];
          if (item.children.length > 0) {
            removeObj(item);
          } else {
            clearCache(item);
            item.clear();
          }
        }
      }
      obj?.removeFromParent();
      obj?.clear();
    };
    removeObj(group);
  }

  deleteModal() {
    cancelAnimationFrame(this.animationId);
    this.animationId = -1;
    for (let i = this.scene?.children.length - 1; i > -1; i--) {
      const obj: any = this.scene?.children[i];
      if (obj.type === 'Group') {
        this.clearGroup(obj);
      } else if (obj.type === 'Mesh') {
        if (obj.material) {
          obj.material.dispose();
        } else if (obj.geometry) {
          obj.geometry.dispose();
        }
        obj.clear();
      }
      obj.removeFromParent();
      this.scene?.remove(obj);
    }

    this.renderer?.clear();
    this.renderer?.dispose();
    this.renderer?.forceContextLoss();
    const gl = this.renderer?.getContext('webgl');
    gl && gl.getExtension('WEBGL_lose_context')?.loseContext();
    if (this.renderer && this.canvasContainer) this.canvasContainer?.removeChild(this.renderer?.domElement as Node);
    // const glCss = this.css3dRender?.getContext('webgl');
    // glCss && glCss.getExtension('WEBGL_lose_context')?.loseContext();
    if (this.CSSCanvasContainer && this.css3dRender) this.CSSCanvasContainer.removeChild(this.css3dRender?.domElement as Node);
    this.camera = null;
    this.orbitControls = null;
    if (this.renderer) this.renderer.domElement = null;

    if (this.css3dRender) this.css3dRender.domElement = null;
    if (this.css2dRender) this.css2dRender.domElement = null;

    if (this.canvasContainer) this.canvasContainer.innerHTML = '';
    if (this.CSSCanvasContainer) this.CSSCanvasContainer.innerHTML = '';

    this.resourceTracker && this.resourceTracker.dispose();
    this.scene?.environment?.dispose();
    !!this.scene?.clear ?? this.scene?.clear();

    this.stats = null;
    this.scene = null;
    this.css3dRender = null;
    this.css2dRender = null;

    this.renderer = null;
    THREE.Cache.clear();
  }
}

export default UseThree;