threejs开发中加载模型的方法 - 将fbx模型转换成 → gltf模型 → glb文件 → 页面获取解析模型（以及模型格式的转换）

一步到位、不用安装任何软件，打开官网编辑器即可使用

https://threejs.org/editor/

👆
（快捷版本）

---

（废弃版）

👇

将需要转换的fbx文件拖动到这个exe文件上，会自动生成gltf格式的文件夹

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)
  }
}

将gltf格式的模型转换成glb格式的二进制模型，用于把模型在浏览器的indexDB中进行缓存，实现页面加载模型优先从浏览器获取的优化方案。

gltf-pipeline -i model.gltf -o model.glb

获取模型blob方式，实现模型压缩及进度条功能（安装localforage依赖）

  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 request from '../request'

export function modelList(url) {
  return request({
    url: url,
    method: 'get',
    responseType: 'blob'
  })
}

// 页面调用
import ModelService from '@/services/model'
import { modelList }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)
  })
})

当初次页面加载完成后，会在浏览器中缓存出blob文件流，下次加载模型时，可直接从indexDB中进行解析加载

自动清除indexDB缓存

// public/config.js
(function config(){
	window.deviceName = {
		head: 'model.glb'
	}
})(window)

// public/index.html
<script src="config"></script>

切换不同模型：model.glb和modelOld.glb

const getModelUrl = async deviceName => {    // head 
  let modelName = window.deviceModelName[deviceName]   // model.glb
  let storeName = `${deviceName}_${modelName.replace('.', '_')}`  // head_model_glb
  const url = `models/${deviceName}/${modelName}`
  try {
    const modelBlob = await proxy.$localforage.getItem(storeName)
    if (modelBlob) {
      return URL.createObjectURL(modelBlob)
    }
    let oldkeys = await proxy.$localforage.keys()
    oldkeys.forEach(key => {
      key.startsWith(deviceName) &&
        proxy.$localforage
          .removeItem(key)
          .then(() => {
            console.log(`Key ${key} deleted successfully.`)
          })
          .catch(err => {
            console.error(`Failed to delete key ${key}:`, err)
          })
    })
    const data = await ModelService.downLoadModel(url, onDownloadProcess)

    if (data) {
      proxy.$localforage.setItem(storeName, data)
      return URL.createObjectURL(data)
    }
    return url
  } catch (error) {
    return url
  }
}