gasInjection-project/src/utils/threejs/main.worker.ts

import modalWorker from './loadGltf.worker?worker';
import Dexie from 'dexie';
import { useModelStore } from '/@/store/modules/threejs';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

export function initModalWorker() {
  type model = {
    modelName: string;
    modalVal: any;
    version: string;
  };
  const modalUrlArr = [
    'fm/fm_2023-06-02.glb',
    'fm/Fm-door_2023-06-02.glb',
    'fm/Fm-wire_2023-06-02.glb',
    'fm/Fm-wall_2023-06-02.glb',
    'fm/fmThree_2023-07-25.glb',
    'fm/fmThreeBase_2023-07-25.glb',
    'fc/sdFc_2023-06-02.glb',
    'fc/ddFc_2023-06-02.glb',
    'cf/lmcf_2023-06-02.glb',
    'cf/lmcfSide_2023-06-02.glb',
    'cf/zdcf_2023-06-02.glb',
    'cf/dscf_2023-06-02.glb',
    'cf/dsgd_2023-06-02.glb',
    'cf/ddcf_2023-07-13.glb',
    'cf/dsmove_2023-06-02.glb',

    'jbfj/jbfj-hd_2023-07-25.glb',

    'jbfj/jbfj-fm_2023-06-02.glb',
    'jbfj/jbfj-fc_2023-06-02.glb',
    'ztfj/dj1_2023-06-02.glb',
    'ztfj/dj2_2023-06-02.glb',
    'ztfj/bg_2023-06-02.glb',
    'ztfj/bg1_2023-06-02.glb',
    'ztfj/dzp_2023-06-02.glb',
    'ztfj/fbm_2023-06-02.glb',
    'ztfj/ztfj-fc_2023-06-02.glb',
    'ztfj/ztfj_2023-06-02.glb',
    'fire/laneway_2023-06-02.glb',
    'fire/chamber_2023-06-02.glb',
    'fire/workFace_2023-06-29.glb',
    'fire/tunFace_2023-07-14.glb',
    'fire/nitrogen_2023-06-02.glb',
    'fire/nitrogenUnderground_2023-09-15.glb',
    'fire/grout_2023-06-02.glb',
    'fire/balancePress_2023-07-20.glb',
    'yafeng/compressor_2023-07-10.glb',
    'gas/gasPump_2023-08-18.glb',
    'mb/obfurage_2023-09-09.glb',
  ];

  const db: any = new Dexie('DB');
  window['CustomDB'] = db;

  const modelStore = useModelStore();
  db.version(1).stores({
    modal: '&modalName, modalVal, versionStr',
  });
  db.open();

  new Promise(async (resolve) => {
    const validateModelUrlArr: string[] = [];

    for (let i = 0; i < modalUrlArr.length; i++) {
      const url = modalUrlArr[i];
      const fileName = url.replace(/(.*\/)*([^.]+).*/gi, '$2');
      const modalName = fileName.slice(0, -11);
      const version = fileName.slice(-11);
      const modalArr = await db.modal.where('modalName').equals(modalName).toArray();
      if (modalArr.length < 1) {
        validateModelUrlArr.push(url);
      } else {
        // 判断该版本是否一致，不一致删除
        const data = modelStore.modelArr.get(modalName);
        const versionDB = modalArr[0].versionStr;

        if (versionDB == version) {
          // 版本一致
          if (!data) {
            const model: model = {
              modelName: modalName,
              modalVal: modalArr[0].modalVal,
              version: modalArr[0].versionStr,
            };
            // modelStore.setModel(model);
          }
        } else {
          // 版本不一致，删除模型，重新下载
          await db.modal.delete(modalName);
          validateModelUrlArr.push(url);
        }
      }
    }
    resolve(validateModelUrlArr);
  }).then((validateModelUrlArr: string[]) => {
    validateModelUrlArr.forEach((url) => {
      const worker = new modalWorker();

      worker.onmessage = async function (e) {
        const { data, message } = e.data;
        if (message === 'end') {
          if (data) {
            modelStore.setModel(data);
          }
          worker.terminate();
        }
      };
      worker.postMessage({ message: 'load', data: url });
    });
  });
}

export function initTHREE() {
  if (!window['$renderer']) {
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true }) as THREE.WebGLRenderer;
    renderer?.setPixelRatio(window.devicePixelRatio);
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    // renderer.shadowMap.enabled = true;
    renderer.toneMappingExposure = 1;
    // renderer.outputColorSpace= THREE.SRGBColorSpace;
    renderer.setClearAlpha(0);
    //renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    //renderer.physicallyCorrectLights = true;

    window['$renderer'] = renderer;
  }

  if (!window['$camera']) {
    const camera = new THREE.PerspectiveCamera(50, document.body.clientWidth / document.body.clientHeight, 0.0000001, 1000);
    window['$camera'] = camera;
  }

  if (!window['$orbitControls']) {
    const orbitControls = new OrbitControls(window['$camera'] as THREE.Camera, window['$renderer']?.domElement) as OrbitControls;
    window['$orbitControls'] = orbitControls;
  }
}