glTF Exploder 🚀

一个专为 Three.js 开发者打造的高性能、可定制化 glTF/GLB 模型爆炸图（拆解图）插件。

---

📖 目录

- 🎯 项目目的
- 📦 保姆级快速上手
- 🛠 爆炸模式详解
- ⚙️ 参数配置说明
- 🛰 API 参考
- 💎 数模图要求 (核心必读)

---

🌟 核心特性

- 🚀 高性能爆炸算法：支持多种模式（径向、轴向、加权等），轻松处理数千个零件。
- 💎 Liquid Glass (流体玻璃) UI：基于高质量流体折射算法的视觉界面，清澈透明，极具现代感。
- 📱 实时响应式设计：自动适配移动端与 PC 端，窗口缩放时 UI 布局实时调整，无需刷新页面。
- 🔍 独立缩放控件：顶部常驻浮动缩放按钮，独立于控制面板，随时精准控制模型视角。
- 💡 智能补光系统：一键解决模型拆解后的内部阴影问题，细节分毫毕现。

---

📦 保姆级快速上手

$3

bash
npm install gltf-exploder


$3

只需一个容器 ID 和模型路径，插件会自动处理场景创建、模型加载、灯光和自适应。

javascript
import { GLTFExploder } from 'gltf-exploder';

const exploder = new GLTFExploder({ viewport: '#scene-container', // 3D 画布容器 ID model: './example.glb', // 模型路径 createUI: true, // 开启内置控制面板 adaptModel: true // 自动适配相机视角 });`

`$3`


如果你已经有现有的 Three.js 场景，可以手动传入对象。

javascript
import { GLTFExploder } from 'gltf-exploder';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
// ... 你的场景初始化代码 (scene, camera, renderer)
const loader = new GLTFLoader();
loader.load('model.glb', (gltf) => {
    const model = gltf.scene;
    scene.add(model);

// 参数顺序：模型, 场景, 相机, 渲染器, 配置项 const exploder = new GLTFExploder( model, scene, camera, renderer, { createUI: true } ); });`

---

`🛠 爆炸模式详解`


插件内置了多种数学算法，满足工业产品的不同展示需求：

---

`⚙️ 参数配置说明 (`ExploderOptions`)`

---

🛰 API 参考

$3

设置爆炸进度 (0-1)。

$3

设置爆炸系数 (0.1-5.0)。

$3

动态切换爆炸算法模式。

$3

更换当前爆炸的模型对象。

$3

控制内置补光系统的可见性。

$3

控制辅助视图（网格、坐标轴、标签）的可见性。

$3

设置模型切换时的回调（当用户在 UI 面板切换模型时触发）。

$3

设置辅助显示状态变化时的回调。

$3

销毁实例。自动清理场景灯光、注销事件并移除 UI，防止内存泄漏。

---

💎 数模图要求 (核心必读)

为了让爆炸图效果“看起来很专业”，模型导出时必须遵循：

1. 零件解耦 (Decoupling)：
- 每一个需要独立位移的零件，在建模软件中必须是独立的 Mesh。
- 如果你的整个模型在导出时被“合并”为一个对象，插件将无法识别内部零件。
2. 包围盒准确：
- 零件的几何数据（Geometry）应尽量紧凑，避免包含不可见的巨大辅助线，否则会干扰爆炸中心点的计算。
3. 坐标轴 (Pivot)：
- 插件会自动计算零件几何中心，但如果零件在导出时自带了偏移量巨大的 Pivot，建议在导出前进行“重置变换 (Reset Transform)”。

---

License: MIT | 由开发者为开发者倾力打造。

glTF Exploder 🚀

一个专为 Three.js 开发者打造的高性能、可定制化 glTF/GLB 模型爆炸图（拆解图）插件。

!Demo Preview

---

📖 目录

- 🎯 项目目的
- 📦 保姆级快速上手
- 🛠 爆炸模式详解
- ⚙️ 参数配置说明
- 🛰 API 参考
- 💎 数模图要求 (核心必读)

---

🌟 核心特性

---

📦 保姆级快速上手

$3

bash
npm install gltf-exploder


$3

只需一个容器 ID 和模型路径，插件会自动处理场景创建、模型加载、灯光和自适应。

javascript
import { GLTFExploder } from 'gltf-exploder';

`$3`


如果你已经有现有的 Three.js 场景，可以手动传入对象。

javascript
import { GLTFExploder } from 'gltf-exploder';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
// ... 你的场景初始化代码 (scene, camera, renderer)
const loader = new GLTFLoader();
loader.load('model.glb', (gltf) => {
    const model = gltf.scene;
    scene.add(model);

// 参数顺序：模型, 场景, 相机, 渲染器, 配置项 const exploder = new GLTFExploder( model, scene, camera, renderer, { createUI: true } ); });`

---

`🛠 爆炸模式详解`


插件内置了多种数学算法，满足工业产品的不同展示需求：

---

`⚙️ 参数配置说明 (`ExploderOptions`)`

---

🛰 API 参考

$3

设置爆炸进度 (0-1)。

$3

设置爆炸系数 (0.1-5.0)。

$3

动态切换爆炸算法模式。

$3

更换当前爆炸的模型对象。

$3

控制内置补光系统的可见性。

$3

控制辅助视图（网格、坐标轴、标签）的可见性。

$3

设置模型切换时的回调（当用户在 UI 面板切换模型时触发）。

$3

设置辅助显示状态变化时的回调。

$3

销毁实例。自动清理场景灯光、注销事件并移除 UI，防止内存泄漏。

---

💎 数模图要求 (核心必读)

为了让爆炸图效果“看起来很专业”，模型导出时必须遵循：

---

License: MIT | 由开发者为开发者倾力打造。

gltf-exploder

glTF Exploder 🚀

📖 目录

🌟 核心特性

📦 保姆级快速上手

$3

$3

$3

🛠 爆炸模式详解

⚙️ 参数配置说明 (ExploderOptions)

🛰 API 参考

$3

$3

$3

$3

$3

$3

$3

$3

$3

💎 数模图要求 (核心必读)

gltf-exploder

glTF Exploder 🚀

📖 目录

🌟 核心特性

📦 保姆级快速上手

$3

$3

$3

🛠 爆炸模式详解

⚙️ 参数配置说明 (ExploderOptions)

🛰 API 参考

$3

$3

$3

$3

$3

$3

$3

$3

$3

💎 数模图要求 (核心必读)

`$3`

`🛠 爆炸模式详解`

`⚙️ 参数配置说明 (`ExploderOptions`)`

`$3`

`🛠 爆炸模式详解`

`⚙️ 参数配置说明 (`ExploderOptions`)`