浏览器 3D CAD 免费开源方案Chili3D 快速上手完整指南【免费下载链接】chili3dA 3D CAD running entirely in the browser项目地址: https://gitcode.com/GitHub_Trending/ch/chili3d想画个零件却要装一个动辄几 GB 的 CAD 软件Chili3D 走的是另一条路整个应用跑在浏览器里打开网页就能建模。它用 TypeScript 写成3D 几何内核把 OpenCascadeOCCT编译成了 WebAssembly渲染交给 Three.js所以不需要装任何本地编译器或建模软件核心操作——画几何体、布尔运算、倒角、测量——都在标签页里完成。 为什么值得试试浏览器里的 CAD传统 3D CAD 的使用门槛其实卡在三件事上安装重装软件、等更新、占磁盘环境锁死公司电脑没装、家里电脑装不上换个设备就得重来分享麻烦给同事看一眼模型得导出图片或视频。而 Chili3D 的思路是模型、命令、UI 全部是前端代码。它的工程是一个 npm workspaces 单仓monorepo代码都放在 packages/ 下核心几何能力由 cpp/src/ 里的 COpenCascade编译为 WASM 提供。你在页面上点一下布尔并集背后就是 WASM 里的 OCCT 在算实体算完由 Three.js 把网格画出来。对两类人尤其友好想把 CAD 能力嵌进自己 Web 项目的开发者——接口是抽象的IShape、IShapeFactory后端是可插拔的只想快速验证一个造型的普通用户——浏览器打开即用支持中文/英文/葡萄牙语界面。 30 秒看懂架构9 个包各司其职Chili3D 按职责拆成了 9 个 npm 包依赖关系大致是web → builder → app/core/three/ui/wasm/storage/i18n。用一张表就能记住包职责一句话理解core抽象接口、数学XYZ、Matrix4、Plane、文档模型、命令、撤销/重做、插件系统整个应用的骨架wasm通过 Emscripten 绑定调用 OCCT几何计算的发动机threeThree.js 视口、相机、高亮、轮廓、坐标轴 Gizmo你看到的 3D 画面ui主窗口、Ribbon 工具栏、属性面板、项目树、对话框办公软件式的界面外壳app具体建模命令盒子、拉伸、布尔……、快捷键、命令服务你能点出来的功能builderAppBuilder流式 API.useIndexedDB().useWasmOcc().useThree().useUI().build()把上面几样组装起来storageIndexedDB 持久化文档存在浏览器里i18nzh-cn / en / pt-br 语言包界面多语言web入口调用 AppBuilder、解析 URL 参数、显示加载页启动第一块拼图这种接口驱动 可插拔后端的设计意味着three只是其中一种渲染实现wasm只是其中一种几何内核理论上可以替换。想深入看某个功能从 packages/app/src/commands/ 里对应的命令文件入手最直观。 三步让 Chili3D 在本地跑起来第一次跑 WebAssembly 项目该从哪一步开始答案很简单只需要Node.js npm仓库里已经带了预编译好的 WASM 模块。1. 克隆并安装依赖git clone https://gitcode.com/GitHub_Trending/ch/chili3d cd chili3d npm install2. 启动开发服务器npm run dev浏览器打开http://localhost:8080就能看到完整的 CAD 界面上方是 Ribbon 工具栏左侧是项目树和属性面板中间是 3D 视口。3. 按需选择其他运行方式目的命令说明生产构建npm run build用 Rspack 打包整个应用跑测试npm run testRstest Happy-DOM带覆盖率测试npm run testc想看哪些代码被覆盖时Lint 检查npm run checkBiome 自动修复格式化npm run formatBiomeTS clang-formatCDocker 部署docker compose up -d同样在 8080 端口提供应用如果你打算从源码重编 WASM 内核可选仓库已含预编译产物额外需要 CMake 工具链分两步走npm run setup:wasm # 一次性准备 WebAssembly 依赖 npm run build:wasm # 实际执行 cmake --preset release 并编译对应配置在 cpp/CMakePresets.jsonC 源码在 cpp/src/。 打开界面后能做什么核心功能速览跑起来之后界面上的能力可以分成六块按你日常会碰到的顺序排基础几何体Box、Cylinder、Cone、Sphere、Pyramid、Torus 等一键生成对应源码在 packages/app/src/bodys/2D 草图直线、圆弧、圆、椭圆、矩形、多边形、贝塞尔曲线——先画线再靠它们生成实体高级建模布尔运算并集/差集/交集、拉伸、旋转、扫掠、放样、偏移曲面、加厚实体以及线性/环形阵列编辑修改倒角Chamfer、圆角Fillet、修剪、打断、分割、缝合、简化外加移动、旋转、镜像测量测长度、测角度还能统计长度/面积/体积之和对象吸附与追踪精确吸附到点、边、面工作平面吸附、轴向追踪都有可视化引导线画出来的尺寸不容易飘。文档层面也齐新建/打开/保存、基于事务的完整撤销重做栈并支持导入导出STEP、IGES、BREP、STL这些工业通用格式——也就是说用 Chili3D 画的模型能直接交给其他 CAD 软件或切片器。 进阶玩法自己编内核、用插件扩展插件系统Chili3D 支持运行时插件通过 URL 参数?plugin动态加载。仓库自带几个示范都在 plugins/ 下插件作用helloworld-js/helloworld-ts最小插件 API 示例JS/TS 各一份macro录制、编辑、运行宏自动化重复操作visual-programming基于 Rete.js 的节点式可视化编程编辑器想给 Chili3D 加一个自己的命令照着helloworld-ts抄结构最快它展示了manifest.json、import map 和命令注册的最小完整形态。语言与部署界面内置 i18n默认支持 zh-cn、en、pt-br 三种语言语言包在 packages/i18n/src/社区也欢迎补充新语言。部署上除了npm run build仓库根目录提供了 Dockerfile 和 compose.yml一条docker compose up -d就能起服务适合想把它挂到内网给大家用的团队。✅ 接下来可以做什么读源码从web入口追到builder再看app里任意一个命令半小时就能摸清一条按钮 → 命令 → WASM → 渲染的完整链路跑测试npm run test覆盖了大量核心模块改代码前先跑一遍最稳妥参与贡献提 PR 前先执行npm run check保证通过 LintTypeScript 用 Biome4 空格缩进、110 字符行宽、双引号C 用 clang-format 的 WebKit 风格了解授权主项目采用 AGPL-3.0商业授权可联系作者C WASM 模块cpp/为 LGPL-3.0详见 LICENSE。从浏览器里打开就能画到内核、渲染、UI 全部可插拔Chili3D 把一套完整的 3D CAD 搬进了前端技术栈。无论你是想白嫖一个免安装的建模工具还是想研究 OpenCascade WebAssembly 在浏览器里的工程化实践它都值得 fork 下来动手跑一遍。【免费下载链接】chili3dA 3D CAD running entirely in the browser项目地址: https://gitcode.com/GitHub_Trending/ch/chili3d创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考