03 / ARCHITECTURE PORTFOLIO & INTERACTIVE 3D
交互式建筑作品集从阅读图纸，到探索空间。
以真实建筑资料为基础，将 PDF 展示转化为支持分层阅读、高清图纸查看和真实 3D 探索的网站。我负责目标、需求优先级、内容方向与验收要求，借助 Claude Code 和 Codex 持续迭代。
2026.09 已有生产发布记录 · AI 用于开发协作
- 我的角色
- 需求与优先级、内容方向、验收
- 项目时间
- 2026.04 — 至今
- 项目范围
- 原建筑站 11 个页面、7 个建筑项目
一分钟概览 / AT A GLANCE
问题
长 PDF 与大型专业模型，让访客难以快速理解设计并深入查看空间。
选择
内容分层；高清图纸与真实 3D 按需打开，退出后保留阅读位置。
结果
原建筑站交付 11 个页面、两个模型；2026.09.07 归档生产发布记录。
边界
这是 AI 辅助开发实践；尚无访客端 AI、真实用户任务测试或完整真机验证。
产品界面 / PRODUCT IN CONTEXT
读懂图纸，再走近空间。
来自用户提供的真实建筑网站截图。这里记录产品与实现过程，建筑设计本身在独立项目页中展开。
原建筑网站真实截图，展示三个精选设计项目。具体设计内容已迁入本站建筑与空间栏目。
原建筑站首页截图，用于记录合并前的信息组织。
原火塘查看器截图。查看完整设计和实际模型，请进入本站对应建筑项目。
01 / THE PROBLEM
材料很完整，
阅读路径却不够清晰。
已有资料涵盖调研、概念分析、平剖面、效果图、实体模型与专业建模文件。长 PDF 要求读者逐页阅读，不同版本还有重复内容；二维图像限定观看视角，大型模型又依赖专业软件。
随着制作推进，需求从视觉效果扩展到真实操作：图纸能否看清，关闭大图能否回到原位置，页面返回后模型是否仍然稳定，加载失败后能否继续阅读。
先理解项目，再按需要深入。
让读者快速建立概览，再自主查看设计依据、高清图纸与三维空间；控制默认加载成本，并减少操作对阅读的打断。
招聘者、设计评审、合作者与非专业访客是后续验证的目标人群，目前没有独立访谈或真实用户任务测试支撑已验证的用户画像。
02 / THE EXPERIENCE
把阅读深度，交给访客。
沿主线理解设计
概览、场地与原建筑、概念推演、图纸、实体模型逐层展开；独有研究放入补充内容，避免重复材料占据主线。
需要细节时查看高清图纸
正文使用响应式展示图；点击查看原图，支持缩放、图库切换与键盘操作。Banner 可独立查看，关闭后恢复焦点与阅读位置。
最后进入真实 3D 探索
查看器放在正文末尾，点击后才加载。通过旋转、缩放、平移、预设视角和显示控制探索空间，也可关闭模型继续阅读。
两个真实模型，采用不同的信息组织
下表记录 2026.09 原站的交付范围。链接已接到本次合并的建筑详情，当前轻量与高清版本的体积以查看器按钮为准；本次本地迁移不等于重新完成线上验收。
| 已实现能力 | ITB 迭代学习 | 祖母的火塘 |
|---|---|---|
| 模型来源 | Rhino | SketchUp |
| 网页模型体积 | 约 6.2 MiB | 约 22.7 MiB |
| 预设视角 | 总览、俯视、正面、侧面 | 四种基础视角 + 完整场地 |
| 显示控制 | 23 个原命名图层 | 建筑与院落 / 场地与道路 |
| 共同操作 | 旋转、缩放、平移、重置、关闭 | 旋转、缩放、平移、重置、关闭 |
| 加载与异常 | 点击加载、进度、超时与重试 | 复用相同机制 |
当前没有改造前后切换，也没有经作者确认的入口、保留结构等语义控制。图层开关不等于模型已理解空间语义。
03 / PRODUCT DECISIONS
让展示方式，
服务于理解。
整合 180 页资料，不把全部内容平铺上网。
ITB 的 48 页 PDF 整理为 45 张素材：1 张封面、44 张正文图片。火塘的两份 PDF 共 132 页，以成果版为主，补入前期版本独有研究，去掉重复、空白与待完成内容。
火塘正文优先呈现理解项目所需的分析与成果。
研究细节进入 8 个展开区，让访客选择深入程度。
两个项目合计整理出 95 张独立素材，其中包含 2 张封面。这是资料整理规模，不代表 95 个独立设计成果。内容描述仍需得到原材料支持。
正文轻量阅读，点击后保留细节。
所有正文直接使用高清原图会提高资源成本，过度压缩又使建筑图纸难以辨认。统一图片组件使用不同尺寸 WebP、宽高声明、懒加载与异步解码，同时保留点击后的高清原图。
| 默认图片引用文件去重体积 | 优化前 | 优化后 |
|---|---|---|
| 首页作品图 | 21.21 MiB | 0.38 MiB |
| Work 封面 | 37.19 MiB | 0.76 MiB |
| Half Diary | 83.58 MiB | 2.11 MiB |
这是页面默认图片引用的文件体积，不能换算为实际加载速度提升；也不代表所有正文已经动态加载或虚拟化。
关闭大图后，不能让读者重新找位置。
长页面中放大图纸后，关闭操作曾触发剧烈滚动。后续调整焦点与滚动恢复，并检查快速关闭、滚轮冲突和反复导航的监听器清理。
火塘图纸关闭前后滚动位置均为 14930px；首页 → 项目 → Banner → 关闭 → 首页连续三轮，每轮保持一个图库窗口。这些是具体回归记录，尚非真实用户体验评分。
转换成功，不等于主体容易理解。
火塘原始 SketchUp 场景包含外围研究、拆解和重复模型。第一次全量转换后，主体建筑在总览中过小。网页副本因此选择中央完整项目，默认聚焦院落，并单独提供完整场地视角。
| 模型处理 | 源文件 | 网页模型 |
|---|---|---|
| ITB · 保留 23 个原图层 | 约 151.3 MiB | 约 6.2 MiB |
| 火塘 · 聚焦中央完整项目 | 约 294.4 MiB | 约 22.7 MiB |
火塘的减少来自范围筛选、实例复用与资源压缩，不能表述为无损压缩。默认镜头和内容范围同样属于产品决策。
一次打开正常，还不足以通过验收。
页面返回后曾出现两个 3D 画布。修正初始化与资源清理后，进行两轮返回 ITB 的回归，每次保持一个画布；关闭为 0，重新打开为 1。查看器离开可视区时暂停绘制，离开页面时释放资源。
注入 HTTP 503 后，界面提供重试和继续阅读提示。模型失败不应阻止访客阅读其余项目内容。
04 / DELIVERY & COLLABORATION
由我确定目标，
与 AI 协作交付。
我提供真实资料，提出目标、需求顺序、内容方向与验收要求，并依据每轮结果继续调整。Claude Code 和 Codex 协助完成具体脚本、模型转换、组件实现与大量检查，部分加载和异常处理方案在开发过程中补充。
- 核对 PDF 来源、署名与版本
- 提取素材 · 去重 · 主线与补充内容分层
- 生成响应式展示图 · 保留高清原图
- 章节导航 · 大图查看 · 退出与返回验证
- 真实 Rhino / SketchUp 模型
- 导出网页 GLB · 范围筛选与优化
- 格式校验 · 按需加载 · Three.js 查看器
- 默认镜头与显示控制 · 关闭、返回及失败回归
本案例讲述的是网站产品开发实践。网站承载的原建筑作品包含 Yuxiang Wang、Han Liu 合作署名，未进一步确认分工前，不将全部建筑设计归为个人独立成果。
05 / EVIDENCE & VALIDATION
记录成功，也记录失败。
以下来自原建筑站已有工程与浏览器检查记录；11 个页面为当时站点范围，不是本次合并版的页面数量。以下保留此前本地回归记录；2026.09.07 生产访问检查见文末独立证据。工程验收不代表真实用户验证已经完成。
| 验收项 | 已有记录 |
|---|---|
| 生产构建与图片资源 | 11 个静态页面；全站本地图片引用检查无缺失 |
| 高清图纸 | 火塘首层图纸打开 3200 × 2263 原图 |
| 图片缩放 | Half Diary 显示宽度 1020 → 2768 → 1020px |
| 关闭后恢复 | Half Diary 约 1667.33px；火塘图纸前后均为 14930px |
| 模型格式 | 两个网页模型及解码展开后的检查均为 0 errors / 0 warnings |
| 重复初始化 | 修复后两轮返回 ITB，每轮一个画布 |
| 失败路径 | ITB 注入 HTTP 503 后出现重试与继续阅读提示 |
| 火塘交互抽查 | 旋转、预设视角、缩放、分组隐藏、键盘平移与关闭通过 |
| 窄屏回归 | 390 × 844 模拟视口下无横向溢出，按钮可换行 |
| 共用组件回归 | 火塘接入后 ITB 仍成功加载 |
本地模型检查，不当作线上性能承诺
| 本地记录 | 下载阶段 | 挂载至第一帧提交 |
|---|---|---|
| ITB | 94ms | 633ms |
| 祖母的火塘 | 117ms | 1313ms |
以上来自原建筑站的本地开发环境，非本次合并版测速；第一帧提交不等于 GPU 完成绘制或用户已感知可操作。已有访问开启 VPN，也不应标为中国大陆直连测试。
失败帮助我补全验收范围。
大图关闭后的页面跳动、返回后重复画布、全量模型主体过小，分别暴露阅读连续性、资源生命周期与展示目标问题。另有 PDF 裁边截断比例尺、模型变换出现 14 个旋转校验错误的记录，可作为内容与转换质量的补充证据。
2026.09.07 已归档并推送网站代码、95 张项目素材与两个 GLB；个人复盘与部分转换资料仍为本地文件。
06 / LIMITS & NEXT STEPS
先验证体验，
再判断 AI 的价值。
目前网站完成核心内容展示与两个真实模型的交互原型。AI 用于开发协作，尚未接入访客自然语言导览、LLM API 或智能问答，当前不将其描述为已完成的访客端 AI 产品。
尚未完成的验证
- iPhone、Android 真机与真实触摸。
- 多浏览器矩阵、弱网与持续交互性能。
- 足够次数的加载成功率统计。
- 3–5 名真实用户任务测试，以及至少两轮真人反馈迭代。
- 国内直连、移动网络与跨地区访问验证；已有代理环境生产访问记录。
下一步产品问题
- 持续记录公开入口与版本，并补充不同网络条件下的使用验证。
- 观察访客如何找到图纸、理解空间和退出模型。
- 记录耗时、误操作、求助与反馈，再决定改进顺序。
- 验证自然语言控制是否比现有按钮更有帮助，再确定访客端 AI 功能范围。
证据与技术附录 / EVIDENCE
结论，可以回到记录。
以下为已有项目记录的归档或节选。此次网站合并保留文件与结论，未重新运行模型评测；原始运行、定向复测和用户验证分别说明。
建筑网站 · 生产访问验收
225 项在首次或定向重试后可取得；保留首轮失败，网络环境为代理连接。
阅读完整归档节选
## 公网验收 环境：本机Windows、现有代理开启；curl请求不附带账户凭证或Cookie。不是大陆直连、真实移动网络或多地区评测。 - 11个页面及其默认图片src、脚本和样式，加两个GLB，共225项匿名GET检查。 - 首轮223项通过。一张WebP出现TLS握手失败；火塘GLB状态200但60秒时只收到15,894,368字节，完整性检查失败。原始结果保存在 docs/performance/production-check.json，不覆盖失败记录。 - 单独复测：WebP返回200、120,390字节、0.562秒；火塘GLB返回200、23,820,388字节、36.590秒，与本地SHA256完全一致。 - 火塘GLB SHA256：21AB5B2A859F61AD308EC7DF9F40C971FA47F3CA23AEC36E4536415D0425B74A。 - ITB GLB首轮返回200、6,539,052字节、30.553秒，与本地SHA256完全一致。 - 两项目HTML都包含实际查看器入口。浏览器确认公网首页、新火塘完整内容和22.7MB入口；实际打开模型并切换俯视，截图确认几何画面正常。 - 浏览器控制工具在Vercel控制台及ITB页面检查期间多次超时；不将本轮记录写成ITB所有公网交互已复测。ITB文件和页面匿名访问已验证，交互另有此前本地记录。 - 上述下载耗时仅反映此代理环境单次请求，不等于普通访客加载速度。最终225项在首次或针对性重试后均可取得，但不能称首次成功率100%或所有网络稳定。 尚未完成：大陆直连、手机移动网络、跨地区访问、全部外部字体/图片的本轮独立验收、所有srcset尺寸及原始大图的逐文件公网检查。网站首页/About仍有外部图片，字体仍有Google Fonts依赖。自定义域名不在本次已完成范围内。
原归档日期：2026.09.07；合并日期：2026.10.07。下载文件附原始来源与 SHA-256，便于核对文件对应关系，哈希不构成独立验证。技术指标与供应商配置描述均为项目记录当时的状态。