[Ruimo.com] Method of loading models in threejs development - convert fbx model to → gltf model → glb file → page acquisition analysis model

Drag the fbx file that needs to be converted to this exe file, and a folder in gltf format will be automatically generated

import { reactive, onMounted, watch, onUnmounted, getCurrentInstance } from 'vue'
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
import { TWEEN } from 'three/examples/jsm/libs/tween.module.min.js'
import digitalTwinDetail from './components/digitalTwinDetail.vue'
import { labelPosition } from '@/assets/contant/labelPosition'
import ModelService from '@/services/model'
const { proxy } = getCurrentInstance()
// 可测试使用
var roadway = loader.load('models/code.gltf',function(res){
    obj = res.scene.children[0]
    _roadway = obj
    obj.scale.set(1,1,1)
    obj.position.set(0,0,0)
    obj.rotateY(-0.5)
    obj.children.forEach(el=>{
        el.material.transparent = true
        el.material.opacity = state.sliderValue * 0.01
    })
},
onProgress
)

const onProgress = (xhr) => {
  state.progress = parseInt((xhr.loaded / xhr.total) * 100)
  if (parseInt((xhr.loaded / xhr.total) * 100) === 100) {
    setTimeout(() => {
      state.progressFlag = false
    }, 2500)
  }
}

Convert the model in gltf format to the binary model in glb format, which is used to cache the model in the browser's indexDB, and realize the optimization scheme that the page loading model is first obtained from the browser.

How to get the model blob

  static getPage(url) {
    return axios({
      method: 'get',
      url,
      responseType: 'blob'
    })
  }
  
import Service from './service'

export default class StatisticsService extends Service {
  static downLoadModel(url, onProcess) {
    return super.getPage(url, {}, onProcess)
  }
}
//
import ModelService from '@/services/model'
//
const getModelUrl = async(modelName) => {
  const url = `models/dusProofSpray/${modelName}/model.glb`
  try {
    const modelBlob = await proxy.$localforage.getItem(modelName)
    if (modelBlob) {
      return URL.createObjectURL(modelBlob)
    }
    // this.showProcess = true
    const data = await ModelService.downLoadModel(
      url,
      onDownloadProcess
    )
    if (data) {
      proxy.$localforage.setItem(modelName, data)
      return URL.createObjectURL(data)
    }
    return url
  } catch (error) {
    return url
  }
}

getModelUrl('transportMachine').then(url => {
  loader.load(url, function(res) {
    var obj = res.scene.children[0]
    obj.scale.set(5, 5, 5)
    obj.position.set(-1070, 106.5, -85.5 + 4.5)
    obj.rotateZ(-20 / 328)
    obj.rotateY(-Math.PI)
    _transportMachine = obj
    _group.add(_transportMachine)
  })
})

After the initial page loading is completed, the blob file stream will be cached in the browser , and the next time the model is loaded, it can be parsed and loaded directly from indexDB