压缩3D模型

第一种方法

npm install -g gltf-pipeline

gltf-pipeline -i 输入.glb -o 输出.glb -d -s

更多参数配置请参考：https://www.npmjs.com/package/gltf-pipeline

使用Draco压缩网格在three中的使用

import * as THREE from 'three';
import { onMounted } from "vue"
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";

onMounted(() => {
    const width = document.documentElement.clientWidth
    const height = document.documentElement.clientHeight

    // 创建3d场景
    const scene = new THREE.Scene()

    // 添加点光源
    const pointLight = new THREE.PointLight("#ffffff", 200, 200)
    pointLight.position.set(10, 10, 10)
    scene.add(pointLight)

    // 创建相机
    const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000)
    camera.position.z = 20
    camera.position.y = 10
    camera.position.x = 10

    // 创建一个GTLF加载器
    const loader = new GLTFLoader()
    const dracoLoader = new DRACOLoader()
    dracoLoader.setDecoderPath("/draco/")
    loader.setDRACOLoader(dracoLoader)
    // 加载
    loader.load("/drco.glb", (gltf) => {
        scene.add(gltf.scene)
    })

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true })
    // 调整渲染器大小
    renderer.setSize(width, height)
    // 添加动画
    renderer.setAnimationLoop(animate)
    document.querySelector('#canvas').appendChild(renderer.domElement)

    const controls = new OrbitControls(camera, renderer.domElement);

    // 动画函数
    function animate(time) {
        controls.update()
        renderer.render(scene, camera);

    }
})

其中dracoLoader.setDecoderPath("/draco/")这个需要引入draco的js文件路径，本来three中有，但是我不知道为什么成功不了，于是就把它单独提出了：

https://gitee.com/xiao-zhe-is-not-lazy/assets