mcpField
O
optimize-3d-assets

optimize-3d-assets

github.com/skinnye创意与媒体541 次安装20 周前更新
代码仓库

关于 optimize-3d-assets

optimize-3d-assets 是用于缩减 3D 模型体积、优化网页交付的工作流技能，同时强调保留外观。它指导资产检查、压缩、可选的 React Three Fiber 转换、运行时解码器设置和结果验证。

主要功能

  1. 01检查 GLB 资产内容
  2. 02压缩几何体和纹理
  3. 03调整过大的纹理尺寸
  4. 04转换为带类型的 R3F 组件
  5. 05验证输出体积与外观

适用场景

  1. 01准备适合网页交付的 GLB 模型
  2. 02缩减过大的几何体或纹理
  3. 03生成可编辑的 TypeScript R3F 组件
  4. 04检查优化后渲染是否保持正常

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/skinnye/3d-web-pack --skill optimize-3d-assets

安装后在 Claude Code 中输入/optimize-3d-assets确认已加载。

详细介绍

优化适用于 Web 的 3D 资源

让模型体积更小、速度更快，同时不损害外观。始终保留原始文件；将优化后的输出写入新文件；报告优化前后的大小。

步骤 0 — 检查

npx @gltf-transform/cli inspect model.glb

注意：文件大小、网格／图元数量、纹理数量及分辨率、估算绘制调用次数，以及是否已使用 Draco／KTX2。

步骤 1 — 一键优化（从这里开始）

npx @gltf-transform/cli optimize model.glb model.opt.glb \
  --compress draco \
  --texture-compress ktx2

此操作会移除未使用的数据、去重、焊接、实例化、对几何体进行 Draco 压缩，并对纹理进行 KTX2 压缩。

步骤 2 — 定向处理（如有需要）

调整过大的纹理尺寸：

npx @gltf-transform/cli resize model.opt.glb model.opt.glb --width 2048 --height 2048

更激进的 meshopt 替代方案（对某些模型来说通常比 Draco 更小）：

gltfpack -i model.glb -o model.pack.glb -cc

（gltfpack 可能需要单独安装：npm i -g gltfpack。）

其他实用的 gltf-transform 命令：dedup、prune、weld、instance、draco、meshopt、用于不同 KTX2 质量等级的 etc1s／uastc。

步骤 3 — 转换为 R3F 组件（可选）

npx gltfjsx model.opt.glb -t -T
  • -t 会生成 TypeScript，-T 会运行转换／压缩。生成的 Model.tsx 包含带类型的 useGLTF 组件和 JSX 场景图，便于逐个网格编辑。

步骤 4 — 运行时解码器（R3F／drei）

压缩后的资源需要在运行时使用解码器。使用 drei 的 useGLTF 时，会处理 Draco、meshopt 和 KTX2；但请确保解码器路径可解析：

import { useGLTF } from '@react-three/drei'
// drei sets up DRACOLoader / KTX2Loader / MeshoptDecoder automatically.
useGLTF.preload('/models/model.opt.glb')

对于原生 Three.js，请将 DRACOLoader、KTX2Loader（以及 renderer.detectSupport）和 MeshoptDecoder 接入 GLTFLoader。

步骤 5 — 验证并报告

  • 比较大小：原始 X MB → 优化后 Y MB（−Z%）。
  • 确认模型仍能加载，且在场景中的外观正确（比例、材质、贴图均正常）。
  • 如果纹理看起来褪色，请提高 KTX2 质量（使用 uastc 和 --texture-compress ktx2），或跳过法线贴图压缩。

目标

  • GLB 最好控制在几 MB 以内，用于重点展示资源；纹理使用 KTX2；几何体使用 Draco／meshopt；每个场景的绘制调用次数低于约 100 次。

如果命令报错，请根据文档核对当前 gltf-transform／gltfpack 的标志。

评论

支持 Markdown