4 个纯前端单文件作品，无需后端、无需构建、无需安装环境。全部文件已内嵌在本文中，点击对应下载链接即可直接保存到本地，双击打开即可在浏览器中运行。所有 3D 渲染均通过 WebGL 在本地完成，零外部模型文件依赖。
一、AH-64 武装直升机 · 高精度三维模型
⬇️ 点此下载 武装直升机-AH64-3D模型.html（85 KB）
技术栈： 自研 WebGL2 前向 PBR 渲染器，零外部依赖
这是四个作品中最硬核的一个——没有使用 Three.js 或任何 3D 引擎，而是从零手写了一套 WebGL2 前向 PBR 渲染管线。AH-64 阿帕奇武装直升机的 3D 模型以代码形式内嵌在 HTML 中（顶点数据直接硬编码），加载即渲染，无需下载任何外部模型文件。
渲染特性：
- PBR 材质系统：基于物理的渲染，金属度 / 粗糙度工作流
- HDR 环境：高动态范围光照，亮部与暗部细节兼顾
- IBL（基于图像的光照）：环境反射让机身漆面呈现真实金属质感
- 法线贴图：为平坦的几何体表面增加细节凹凸感
- 自研 Shader：顶点着色器与片段着色器完全手写，理解每一步渲染逻辑
- 零依赖，87 KB 包含模型数据与完整渲染器
- 手写 WebGL2 PBR 管线，适合学习图形学原理
- 3D 模型以顶点数组内嵌，无需加载外部文件
- 支持鼠标拖拽旋转、滚轮缩放交互
二、CHRONO·X AETHER PRO — 未来奢华智能腕表 3D 定制展示
⬇️ 点此下载 CHRONO-X-AETHER-PRO-智能腕表3D展示.html（55 KB）
技术栈： Three.js r128 + GSAP + OrbitControls + CSS Glass Morphism
一个充满未来感的奢华智能腕表产品展示页。深色背景搭配金色、青色、玫红三色点缀，毛玻璃质感 UI 面板悬浮于 3D 场景之上。支持 OrbitControls 自由旋转、缩放查看腕表模型，GSAP 驱动的流畅入场动画让页面加载即有仪式感。
亮点：
- 腕表 3D 模型包含表盘、表带、表冠等可交互部件
- 支持材质与配色定制切换
- 响应式设计，桌面端与移动端均可正常浏览
- 纯单文件，CDN 引入依赖，双击 HTML 即可运行（需联网加载 CDN）
三、NØVA ONE — 极简未来智能腕表 3D 交互展示
⬇️ 点此下载 NOVA-ONE-极简未来智能腕表3D展示.html（36 KB）
技术栈： Three.js 0.164 ES Module + RoundedBoxGeometry + RoomEnvironment + PBR 环境贴图
与 CHRONO·X 的奢华路线不同，NØVA ONE 走的是极致克制的设计语言——深黑底色搭配薄荷绿强调色，大量留白。Three.js 通过 ES Module importmap 加载，使用 RoundedBoxGeometry 构建圆润的表壳几何体，RoomEnvironment 生成 PBR 环境贴图让金属与玻璃材质在光照下呈现真实质感。
亮点：
- importmap 规范引入 Three.js，代码结构现代清晰
- RoundedBoxGeometry 打造无硬边的表壳造型
- PBR 材质 + 环境贴图，金属反射效果自然
- 场景雾化（FogExp2）增加空间纵深感
- 支持表带、表壳等部件的交互操作
四、代码气味鉴定师 StinkRater
⬇️ 点此下载 代码气味鉴定师StinkRater.html（21 KB）
技术栈： 纯原生 HTML / CSS / JavaScript，零依赖
一个有趣的代码质量检测小工具——粘贴或上传代码文件，StinkRater 会从 7 个维度对你的代码「闻味评分」：
| 维度 | 说明 |
|---|---|
| :--- | :--- |
| 函数长度 | 检测超过 30 行的过长函数 |
| 圈复杂度 | 评估分支嵌套与条件判断的复杂程度 |
| 嵌套深度 | 发现过深的代码嵌套层级 |
| 魔法数字 | 识别代码中未命名常量的裸数字 |
| 单字母变量 | 检测缺少语义的变量命名 |
| 注释缺失 | 标记缺少必要注释的代码段 |
| 空 Exception | 发现空的异常捕获块 |
亮点：
- 零依赖，22 KB 单文件，离线可用
- 支持 JS / Python 双语言检测
- 可视化气味评分条，结果一目了然
- 终端美学 UI，适合分享到技术社区
技术概览
| AH-64 | CHRONO·X | NØVA ONE | StinkRater | |
|---|---|---|---|---|
| :--- | :---: | :---: | :---: | :---: |
| 3D 引擎 | 自研 WebGL2 | Three.js r128 | Three.js 0.164 | — |
| 外部依赖 | 无 | CDN 3 个 | CDN 1 个 (importmap) | 无 |
| 文件大小 | 87 KB | 56 KB | 38 KB | 22 KB |
| PBR 渲染 | ✓ (自研管线) | ✗ | ✓ (环境贴图) | — |
| 代码行数 | 1906 | 1745 | 1059 | 565 |
使用说明
- 点击各作品下方的 ⬇️ 点此下载 链接，浏览器会将文件直接保存为对应的
.html文件（无需解压、无需改名）。 - 双击下载好的 HTML 文件，即可在浏览器中打开运行。
- AH-64 与 StinkRater 完全离线可用；CHRONO·X 与 NØVA ONE 依赖 CDN 加载 Three.js，运行时需要联网。
