这个工作室是怎么做出来的
从阳光下的一张书桌开始，把作品、手记和介绍放进一间可以逛的工作室。这里记下画面背后的做法，以及还需要继续改进的地方。
从作品列表到可以逛的房间
打开网站，先看到一间有阳光的工作室。显示器、陈列架、笔记本和资料柜各有入口，拖动可以转动视角，点击物件则慢慢走近。房间由 Three.js 加载三维模型，在浏览器里实时渲染。这样的首页让浏览多一点探索感；需要集中阅读时，作品与介绍仍有独立页面，不必一直停留在三维场景里。
写实感来自一套一致的光
橡木的纹理、椅背的弧度和桌椅落地的阴影，需要放在同一个空间里考虑。室内模型在 Blender 中制作，木材与织物使用 PBR 素材，Cycles 预先计算阳光、天空光和漫反射，再把结果烘焙进贴图。浏览器直接显示这套光照，不重复打光。因此镜头可以移动，阳光与树影仍保持静态；当前没有实时重算整间房的全局光照。
窗外留一点正在发生的事
开场镜头从房间走向窗边，最后停在蓝天和高楼前。窗外采用 AI 生成的摄影风格素材，把远处建筑、近处屋顶与绿化放在不同深度，形成带有小幅视差的 2.5D 景观，并非实拍照片或三维城市扫描。白云使用单独的透明图像，在代码中缓慢移动，建筑会遮住后方的云；楼上的倒影与阴影仍是图像里的静态细节，不能绕到楼背后自由漫游。
先走近，再阅读
点击显示器后，镜头先推进到桌前，等位置就绪，再出现可以操作的网页内容。视频播放器与纸面文字由 HTML 承载，既能点，也能用键盘访问。拖动或选择其他区域会接管开场路线，Esc 可以回到全景；系统开启减少动效时，不自动运镜，云也保持静止。模型加载失败时，还保留静态房间与内容入口。
把真实界面放回作品里
作品页后来换掉了抽象几何展品，直接展示项目界面。3D System Flow 使用已有教学录屏的封面与视频，CiteRAG 使用项目的真实截图组。点开后可以播放或翻页，再进入项目记录和源码。录屏与截图让访客知道项目长什么样，也有清楚的边界：它们展示已有界面，并不代表本站正在运行对应的后端或模型服务。
画面不变，加载继续改进
加载优化先处理缓存、传输和加载次序，三张城市 PNG 另存为无损 WebP，并核对解码后的每个像素，保留尺寸与颜色。室内原素材不变；房间准备好就先开始室内运镜，窗景未就绪时在桌前等候。缓存能让再次访问少下载资源，首次访问仍需要下载模型与贴图、解码图片并准备渲染。它还需要继续测量与改进，不能把复访变快当成首访问题已经解决。