chili3dUse when building browser-based 3D CAD applications with WebAssembly — STEP/B-Rep visualization, measurement tools, sectioning. Chili3D: pure Web 3D CAD built on OCCT.js compiled to WASM with TypeScript API.
Independent GitHub snapshot · Automated classification · Original documentation governs
name: chili3d description: "Use when building browser-based 3D CAD applications with WebAssembly — STEP/B-Rep visualization, measurement tools, sectioning. Chili3D: pure Web 3D CAD built on OCCT.js compiled to WASM with TypeScript API." tags:
项目地址： https://github.com/xiangechen/chili3d
在线体验： https://chili3d.com/
许可证： AGPL-3.0
Chili3D 主要特性：
直接打开 https://chili3d.com/：
git clone https://github.com/xiangechen/chili3d.git
cd chili3d
pnpm install
pnpm dev # 本地开发服务器（rspack dev）
pnpm build # 静态构建（rspack build）
构建产物可直接部署到任何静态托管（Nginx / Cloudflare Pages / GitHub Pages）。
packages/
├── core/ # 模型、命令、应用框架（@chili3d/core）
├── three/ # Three.js 渲染（@chili3d/three）
├── wasm/ # OCCT.js WebAssembly 桥接（@chili3d/wasm）
├── builder/ # 拉伸/旋转/扫掠/放样等特征构建器（@chili3d/builder）
├── element/ # Web Components 控件
├── parametric/ # 参数化功能定义
├── ui/ # UI 组件
├── web/ # 主 Web 应用（@chili3d/web）
├── app/ # 应用入口
├── storage/ # 项目存储
├── i18n/ # 国际化
└── ai/ # AI 助手集成
<div id="cad" style="width:100%;height:100vh"></div>
<script type="module">
import { Application } from '@chili3d/web';
const app = new Application(document.getElementById('cad'));
await app.start();
</script>
或作为 iframe：
<iframe src="https://chili3d.com/" allow="cross-origin-isolated"
style="width:100%;height:100vh;border:0"></iframe>
WebAssembly OCC 需要启用
SharedArrayBuffer，要求站点设置Cross-Origin-Opener-Policy: same-origin与Cross-Origin-Embedder-Policy: require-corp。
import { occt } from '@chili3d/wasm'; // OCCT.js WebAssembly 模块
const oc = await occt();
const box = new oc.BRepPrimAPI_MakeBox_2(100, 60, 30).Shape();
// 进一步通过 @chili3d/core 的 Visual 对象包装显示
Chili3D 命令通过 Command 注册：
import { Command } from '@chili3d/core';
@Command({ id: 'my.line', display: '我的直线' })
export class MyLineCommand {
async execute(app) {
const p1 = await app.input.getPoint('选择起点');
const p2 = await app.input.getPoint('选择终点');
app.activeView.document.add(LineFactory.byPoints(p1, p2));
}
}
.chili JSONChili3D 渲染层在 packages/three（@chili3d/three），可定制材质、光照、PBR：
import { ThreeView } from '@chili3d/three';
const view = ThreeView.fromCanvas(canvas);
view.scene.add(new THREE.AmbientLight(0xffffff, 0.5));
@chili3d/web 包<div>，实例化 Application| 问题 | 解决 |
|---|---|
| 加载 OCCT.wasm 失败 | 站点未启用 COOP/COEP；改用 cross-origin-isolated |
| 无法导入 DWG | 暂不支持 DWG，先转 DXF/STEP |
| 中文菜单 | Settings → Language 切换为中文 |
| 性能差 | 确认使用 rspack 生产构建（pnpm build）；启用浏览器 SIMD |
| 模型透视错乱 | 检查相机近/远裁剪面与单位 |
✅ 教育、Web 演示、轻量 3D 建模、定制配置器、嵌入业务系统 ❌ 大型工业装配、复杂曲面（仍推荐 FreeCAD/OCCT 桌面）
@chili3d/wasm 直接调用 OCCT.js 进行几何构造，而非通过 UI 层间接操作。SharedArrayBuffer 依赖 HTTPS 或 localhost；③ OCCT.js 加载较慢（首次约 5-15s），需显示加载进度；④ 浏览器内存有限，大模型应考虑服务端处理。occt() 初始化 → BRepPrimAPI_MakeBox 等构造几何 → @chili3d/core 的 Visual/Document 包装 → 渲染显示。自定义命令继承 Command 类，通过 app.input.getPoint() 获取用户交互。