造物集 · Creative Code Works

五个沉浸式互动作品的合集入口,纯静态、零构建依赖,可直接部署到 Vercel。

作品	技术	路径
乐高 · 四驱拉力车	Three.js 0.170(已本地化)	works/lego-4x4/
黑洞 · Schwarzschild	原生 WebGL 着色器	works/blackhole.html
三阶魔方	Three.js + Tween.js(UNPKG CDN)	works/rubiks-cube.html
天空之城 · Skyhold	Three.js r128(jsDelivr CDN)	works/sky-city.html
忍者神龟骑秃鹫	纯 CSS/Canvas 动画	works/tmnt-vulture.html

本地预览

需要任意静态服务器(ES Modules 限制,不能直接双击打开):

cd portfolio
python -m http.server 8643
# 打开 http://localhost:8643/

部署到 GitHub + Vercel

1. 推送到 GitHub

cd portfolio
git init
git add .
git commit -m "init: 造物集作品集"
# 在 GitHub 上新建空仓库(如 portfolio),然后:
git remote add origin https://github.com/<你的用户名>/<仓库名>.git
git branch -M main
git push -u origin main

2. Vercel 部署(二选一)

方式 A · 网页导入(推荐)

1. 打开 vercel.com/new,用 GitHub 登录
2. 选择刚推送的仓库 → Import
3. Framework Preset 选 Other(纯静态,无需任何构建配置)
4. 点 Deploy,几秒后得到 https://<仓库名>.vercel.app

方式二 · Vercel CLI

npm i -g vercel
cd portfolio
vercel --prod

目录结构

portfolio/
├── index.html            # 入口:卡片墙(缩略图 + 名称)
├── assets/thumbs/        # 各作品实拍缩略图
└── works/
    ├── lego-4x4/         # 含本地化 three.module.js 与 addons/
    ├── blackhole.html
    ├── rubiks-cube.html
    ├── sky-city.html
    └── tmnt-vulture.html

备注:works/lego-4x4/ 的 Three.js 已本地化,离线可用;魔方与天空之城依赖 CDN,在线环境自动加载。