我的个人主页现在是一间可以点击的小屋。书架、显示器、奖牌、海报和房门不只是装饰，它们分别对应博客、项目、经历、荣誉与个人介绍。
- 欢迎来我的小屋坐坐：进入小屋
- 查看 About 页面
从真实房间开始
小屋的布局来自我在校外居住的真实房间。桌子和双显示器位于一侧，床占据另一侧，衣柜、书架、冰箱和窗帘沿墙排列。网页没有追求完全写实，而是保留这些最容易识别的空间关系，再将它们转化为简洁的矢量线稿。
网页中的桌子、床、衣柜、窗帘与地毯都来自这间真实房间。
两个主要参考项目
设计过程中主要参考了两个开源项目：
- Animnia/pure-line-room 提供了纯线条房间的视觉方向。它说明即使不依赖复杂材质，也可以通过轮廓、透视和留白建立清晰的空间感。
- MmzMing/3D-HOME 展示了房间物件的组织方式、对象高亮和点击反馈。项目的在线页面也帮助我理解固定全景与对象聚焦之间的切换逻辑。
把个人内容放进房间
相比在页面上继续堆叠导航栏和卡片，我希望访客通过房间中的物件理解内容：
| 房间物件 | 对应内容 |
|---|---|
| 书架 | 博客文章 |
| 主横屏 | 科研项目 |
| 左侧竖屏 | 实习与个人经历 |
| 三枚奖牌 | 荣誉与奖项 |
| 墙上海报 | About Me |
| 窗户 | 个人链接 |
| 房门 | 个人网站 About 页面 |
冰箱、窗帘、空调、椅子和被子则保留为生活化交互。
简洁的设计思路
1. 固定全景，而不是自由漫游
页面使用固定的正交镜头，访客进入后可以立刻看到房间全貌。点击物件时镜头只做有限聚焦，不提供自由旋转。这样既能维持构图，也能避免访客在三维空间里迷失。
移动端使用单独调整过的固定镜头，而不是直接裁切桌面画面。
2. 线稿为主，颜色只负责识别
房间主体使用轮廓线、低透明度色块和少量阴影。绿色地毯、木色床铺、紫灰色衣柜与彩色书脊负责区分物件，但不会覆盖线稿结构。
可点击物件不再依赖常驻的小圆点，而是在鼠标接近时显示轮廓高亮。访客仍然能发现交互区域，页面也不会一直布满提示标记。
3. 交互应当符合物件本身
房间中的操作尽量使用现实世界里的动作：窗帘被拉开，冰箱门向外转动，被子折叠，椅子移动，空调和墙面灯开关切换状态。声音只在点击后播放，悬停不会触发音效。
音效目前以合成效果和少量本地音频为主，重点是给动作提供反馈，而不是持续制造环境噪声。
4. 昼夜模式
大门旁放置了一个实体灯开关。关灯后，背景、线稿、文字和内容面板会切换到夜间配色，显示器保留亮度并向桌面投射柔和冷光。
小屋与博客共用同一个主题状态：在博客切换黑夜模式后进入小屋，房间会自动关灯；在小屋拨动开关后返回博客，博客也会保持相同主题。
白天使用暖白背景、深色轮廓和克制的物件配色。
夜间压低房间亮度，同时保留显示器光线与浅色界面边框。
实现方式
这个页面并不是先在建模软件中制作完整房间，再把模型导入网页。它更像在代码里搭积木：用长方体、平面和线条拼出床、桌子、衣柜与显示器，再用少量图片补充海报和屏幕内容。Three.js 主要负责把这些物件放进同一个三维空间，并处理镜头、动画和鼠标交互。
实现时主要遵循了五个思路。
1. 把房间当成一张有纵深的插画
页面没有让访客自由旋转镜头，而是提前选定一个最容易看清房间布局的轴测视角。这个视角弱化了“近大远小”的透视变化，床、桌子和书架即使处于不同距离，也能保持稳定、清晰的比例。
因此，这里使用三维空间不是为了模拟游戏，而是为了得到一张可以聚焦、可以点击、具有前后关系的立体插画。技术上采用正交相机（OrthographicCamera），但真正重要的是：构图优先于自由度。
2. 用简单形状表达物件，而不是追求完整写实
家具由基础几何体构成，轮廓线负责说明结构，低透明度色块负责区分材质和功能。例如，衣柜只需要柜体、门板和把手就能被识别；书架依靠层板和不同颜色的书脊建立特征。
这种方法牺牲了一部分细节，却让所有物件保持统一的线稿语言。后续调整布局时，也可以直接修改尺寸和坐标，不必重新制作和导出模型。
3. 把“看见的物件”和“可以点击的区域”分开
线稿家具通常很细，直接要求访客准确点击门把手或显示器边框，操作会很困难。因此，每个可交互物件外面都有一个看不见、略大的点击区域。鼠标接近时，页面再显示物件轮廓高亮。
这样，视觉模型可以继续保持纤细，交互区域却足够宽容。访客点击的是一个容易命中的区域，看到的仍然是自然的房间物件。
4. 用状态变化表现动作
房间交互不是播放预制视频，而是记录每个物件当前处于什么状态，再让它从一个状态平滑过渡到另一个状态。例如：窗帘从闭合移动到两侧，冰箱门围绕铰链旋转，被子从展开变为折叠，墙面开关翻转后房间进入夜间。
这种方式让动作可以反复执行，也方便让声音、文字提示和视觉状态保持一致。
5. 让房间服从网站，而不是成为孤立页面
小屋和博客共用同一个昼夜设置，因此在任一页面切换主题，另一边都会保持相同状态。桌面端和手机端则分别设置镜头与界面位置：桌面强调完整空间，手机优先保证主要物件和操作入口可见，而不是简单裁掉桌面画面的两侧。
这套方案的优点是轻量、容易修改，也方便继续把真实房间里的物件加入网页。它的边界也很清楚：家具比例、前后遮挡和镜头构图仍然需要手工调整；复杂材质、物理碰撞和完全真实的灯光并不是当前重点。
结尾
感谢以下两个参考项目及其作者的开源，欢迎参观我的小屋：https://howillmakeit.github.io/
- 参考项目：pure-line-room
- 参考项目：3D-HOME
- 在线体验：HOWILLMAKEIT 的小屋