小布工坊.
← 回到资源库

资源详情 · 3D建模

Three.js：用独立零件做产品拆解展示

用自制几何形体练习拆开、装回和旋转，再考虑导入自己的分件模型。

资源正文、示例和许可证保留原文。代码仅展示，不会在线执行或调用AI。

打开交互详情 →使用教程 ↓打开原项目 ↗

资源详情

适合有少量 JavaScript 基础，想把虚构小产品拆解过程放进网页的人。先做三五个零件的简单演示，不需要下载大型生成模型。

使用前准备

适用平台
浏览器 · Windows · macOS · Linux
内容更新
  • 基础 HTML/JavaScript、文本编辑器与支持 WebGL 的浏览器；走 npm 构建路线再按官方说明准备 Node.js。
  • 先用自制几何体；导入真实模型时应有合法分件 GLB 与明确资产许可。

新手先按 /3d/workshop 下载完整练习包。只在解压后的普通文件夹运行node server.mjs；想改参数按README生成新模型，原文件保留。

常见卡点

  • 不是给照片自动生成真实内部零件的工具；整体网格需要先分件。
  • 核心、loader 与 addons 版本一致；本站另提供r186查看器实战；只覆盖该原创样品，未完成手机、所有平台或安全审计。
官方网站与安装说明 ↗

开始完整案例 →

完整正文

【从哪里开始】用同一四层控制盒练习：base底座、circuit电路示意、frame内框和lid顶盖，给每件独立命名，记录原始位置。点击“拆开”时分别移动，点击“装回”时恢复；标签要说明这只是虚构结构。

【准备条件】需要能运行 WebGL 的浏览器、文本编辑器和基础 HTML/JavaScript。若采用 npm 构建路线，再按官方说明准备 Node.js 与构建工具；不必先克隆完整仓库。锁定同一版本的核心库与 addons，不混用版本。

【模型与动画】Object3D 可以组织零件层级与位置；GLTFLoader 载入 glTF/GLB；已有动画可交给 AnimationMixer。真正产品需要在源模型中保留分件层级；如果导出成一个整体网格，框架不会替你识别螺丝和内部零件。

【先检查什么】拆开后零件不应突然跳位，装回后应回到原位置；手机上能拖动查看、暂停动画，资源加载失败时应显示说明。浏览器页面不等于已导出 MP4，视频录制与编码是后续步骤。

【版本记录】本条许可取自官方最近稳定 release r186 对应提交 9b4a2ac29c63ccb43fd51c5661f2f873ac2c39b8。完整实战 /3d/workshop 另有同版本官方库与原创控制盒GLB的本地查看器，具体运行证据单独记录，不代表完整上游仓库或全部平台通过。

【来源与许可】three.js authors（MIT 原版权署名）；mrdoob 为官方仓库维护账号；许可固定提交 9b4a2ac29c63ccb43fd51c5661f2f873ac2c39b8。MIT 允许依条款商用、修改和再分发；复制软件或其实质部分须保留版权声明和完整许可。拆解演示需要独立零件或预先制作好的拆解动画；工具不会自动从一张照片推断真实内部结构。只使用自制几何模型或明确允许相应用途的分件 GLB，不把演示中的虚构结构说成真实产品内部。

【本站核对范围】导览与完整实战互通：/3d/workshop。实战包只分发已固定版本的Three.js必要模块，并保留完整MIT、上游作者、来源与摘要；模型为本站原创。只验证这套教学查看器，不等于完整仓库、手机、读屏、所有平台或安全审计通过。导览采用CC BY 4.0，软件与附加素材按各自许可。

使用教程

跟完整实战 /3d/workshop 使用同一四层控制盒：base、circuit、frame、lid。先理解包围盒与坐标，再运行原创GLB的查看器。

  1. 保持同一套四部件

    从完整实战下载原创GLB与源码。四ID为base、circuit、frame、lid，源单位mm、X右Y后Z上；GLB已转换为米、Y向上，不再重复转换。模型的壳体和细节为本站明确设定，不是从照片猜出真实结构。

  2. 加拆开和装回按钮

    用同一时间进度将每件从原位置平滑移向各自偏移位置；装回时反向插值。给动画加暂停和复位，避免重复点击不断叠加位移。

  3. 检查一次完整往返

    先旋转观察完整模型，再拆开、暂停、装回；对照原坐标检查是否归位。资源改为自有 GLB 后，再核对分件名称、加载失败和手机操作。

预期输出

完整实战提供四部件原创模型、拆解滑块、播放暂停与时间轴，下载后可在本地运行。具体已验证环境及仍待验证范围，见 /product3d-kit/VALIDATION.txt；不将网页展示等同工程验证。

完整实战的Three.js r186与GLTFLoader采用官方固定发布版本。运行证据见 /product3d-kit/VALIDATION.txt；仅此教学查看器，不代表整个项目、其他浏览器或真实产品均已验证。

适合用在哪里

  • 原创产品拆解交互原型
  • 已经准备好合法分件 GLB 的网页展示

注意事项

  • 拆解演示需要独立零件或预先制作好的拆解动画；工具不会自动从一张照片推断真实内部结构。只使用自制几何模型或明确允许相应用途的分件 GLB，不把演示中的虚构结构说成真实产品内部。
  • 核心库、loader 与 addons 锁定相同稳定版本；源代码和模型许可分别核对。
  • 先完成网页效果；导出视频、真实工程仿真和自动生成结构是不同任务。

原作者与来源

署名
本站导览
上游作者
three.js authors（MIT 原版权署名）；mrdoob 为官方仓库维护账号
来源版本
9b4a2ac29c63ccb43fd51c5661f2f873ac2c39b8
许可核对日期
2026-10-23

完整许可证

CC BY 4.0

CC BY 4.0 · 阅读完整许可原文 ↗

上游许可 · MIT

The MIT License

Copyright © 2010-2026 three.js authors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

阅读完整许可原文 ↗

验证范围

浏览器流程已试用

已在内嵌浏览器用Three.js r186与GLTFLoader运行本站原创四部件模型，检查拆解、6秒动画、暂停、时间轴与旋转。仅此案例；本次未测试真机触屏、读屏、其他引擎，未进行安全审计。

2026-10-23 内嵌浏览器 · WebGL2 / Three.js r186

查看验证记录 →