小白容易遇到的模型太大和卡顿问题

一、模型对象定义

定义模型对象时无论是Vue还是React最好不要用响应式特性。 以Vue为例：

import { defineComponent, onMounted, reactive } from 'vue'
import * as BABYLON from 'babylonjs'
import 'babylonjs-loaders'
export default defineComponent({
  setup() {
    const babylon = {
      canvas: null,
      engine: null,
      scene: null,
      camera: null
    }

二、GLTF模型压缩

当模型文件过大是可能会导致加载缓慢，可以用GLTF压缩工具将模型压缩。

gltf-pipeline可以將blender导出的模型文件最大压缩90%

gltf-pipeline: npm install -g gltf-pipeline

将glTF转换为Draco glTF：gltf-pipeline -i model.gltf -o modelDraco.gltf -d

例：

被压缩文件：

压缩后文件：

注释：

Alcas.gltf：需要压缩的文件
modelDraco.gltf：压缩后的文件名称