返回博客
ReactThree.js内容架构可访问性

3D 首页开发记录 06:内容不离开房间

博客、摄影和书法不再跳回普通页面模板,而是在显示器与房间内原生内容层中完成浏览,同时保留真实 DOM 与键盘操作。

·约 482 字

3D 首页如果每次点击物件都跳回普通路由,房间只会成为一个昂贵的导航菜单。于是这一阶段把“内容留在房间里”定为交互边界:空间负责建立入口,阅读界面在空间上方展开,但用户不离开当前 Studio 语境。

显示器成为一个小型桌面

点击显示器后先进入 Monitor OS,而不是直接打开博客列表。默认暗色桌面使用普通网站的夜间背景,左侧提供 GitHub、博客、摄影和关于入口;进入博客后可以在显示器内部查看索引与全文,并在局部切换日间/夜间模式。这个主题只属于显示器内容,不会改写 Blender 烘焙或房间光照。

显示器聚焦后的 Monitor OS 桌面

书法鸟则直接进入书法档案和作品详情,不再先展示首页摘要模板。内容层保持固定高度、内部滚动和背景虚化,房间仍然可辨认;摄影也使用同一 renderer 切换到场景内画廊,而不是再创建第二个 WebGL 画布。

房间语境内展开的书法档案

提示交互,但不把房间画成线框图

鼠标在空白 Canvas 上显示 grab,拖动时变成 grabbing;命中可交互物件时才切换为 pointer。高亮也不是包围盒或每条子网格硬边,而是把完整 typed root 的可见三角面合成一次屏幕空间外扩轮廓。显示器外壳和屏幕解析为同一个根,因此不会出现两套互相重叠的触发框。

内容层、原生链接和键盘焦点最终比“全部做进 3D”更重要。沉浸感来自连续语境,不来自把清晰文字强行烘成贴图。