网页程序化建模项目

使用 Three.js 在浏览器中实时程序化构建 3D 模型的项目。 无需 Blender、FreeCAD 等桌面工具,模型全部由 JavaScript 在网页运行时生成。

项目结构

├── site/ # 展示站点(Vite 构建)
│ ├── index.html # 页面结构
│ └── main.js # Three.js 渲染器 + OrbitControls
├── src/models/ # 网页模型源码(程序化建模)
│ ├── shared.js # 共享工具(材质工厂、网格辅助、取景)
│ ├── tiananmen.js # 天安门城楼
│ ├── maodie_cat.js # 耄耋橘猫(细化版)
│ ├── apple.js # 红苹果
│ ├── iron_cross.js # 铁十字勋章
│ └── medal_of_republic.js # 共和国勋章
├── tests/ # 模型构建测试(Node 原生 test runner)
├── .github/workflows/ # GitHub Actions 工作流
├── docs/ # 文档
├── vite.config.js
└── package.json

模型列表

模型	源码	特征
天安门城楼	src/models/tiananmen.js	城墙+城门洞、城楼、重檐歇山顶、华表、石狮、金水桥
耄耋橘猫	src/models/maodie_cat.js	圆头、飞机耳、哈气露齿、竖瞳、虎斑纹、四肢尾巴
红苹果	src/models/apple.js	果洼凹陷、蜡质果皮、果点、微弯果柄、叶片
铁十字勋章	src/models/iron_cross.js	十字主体、银质边框、年份浮雕、橡叶、挂环
共和国勋章	src/models/medal_of_republic.js	五角星主体、圆边框、中心圆盘、麦穗、挂环

快速开始

# 安装依赖
npm install
# 本地开发(热更新)
npm run dev
# 运行模型构建测试
npm test# 构建站点(输出到 dist/)
npm run build
# 预览构建产物
npm run preview

在线展示

访问 GitHub Pages 查看交互式 3D 模型。 模型全部在浏览器端实时构建,拖拽旋转、滚轮缩放。

设计约定

• 每个模型模块导出 buildXxx() 返回 THREE.Group,Z 轴向上,底面落在 Z=0。
• 模型只含几何与材质,不含灯光/相机/地面(站点统一提供)。
• 材质通过 shared.js 的 mat() 工厂创建并复用,数量控制在 10 以内。
• 单个模型三角面预算 100k 以内;重复构件使用循环生成。
• 网格命名用中文"位置+构件+序号"。

详细约定见 docs/modeling_best_practices.md。

许可证

MIT License