Three.js3D 交互物理动效小游戏
3D 首页开发记录 07:魔方、掌机和一张会摆动的名牌
最后一轮把小物件从装饰变成局部应用:魔方按层转动、掌机运行小游戏,墙上名牌则使用有限弹簧模拟拖拽和翻面。
·约 462 字
房间接近定稿以后,书柜里的魔方、掌机和墙上名牌承担了另一类体验:镜头不再只是靠近一个阅读入口,而是把物件暂时变成可以直接操作的小应用。
魔方的网格也是状态
魔方由 26 个独立 cubie 组成。鼠标命中色块后,控制器记录交点、表面法线、相机方向和当前观察四元数,再把屏幕拖动映射为 F/R/U/B/L/D/M/E/S/X/Y/Z 中的等价转动;拖在魔方外部则只改变整体观察角度。键盘表明确区分大写基础方向与小写反向,并给出初始打乱和复原提示。

掌机采用同样的“物件前移、房间后退”语法,但最终让真实屏幕正对用户。Tetris 与 Snake 画在模型的本地 CanvasTexture 上,方向键或 WASD 操作,R 重新开始;退出时模型恢复 Blender 的书架姿态。

有限物理比永久循环更适合首页
悬挂名牌正面使用 Gothic H 和“胡泽君 / Zejun Hu”,背面保存联系入口。聚焦时房间缩小、名牌居中;拖拽映射到两个有上限的摆动轴,松手后有限阻尼弹簧回正,翻面也只在交互期间运行。没有常驻物理引擎,也没有永久 RAF 循环。

这一天解决的是交互框架;第二天的修复记录继续处理魔方真实 GLB 朝向、复原公式和拖动上限。两篇分开保留,是因为“让物件可玩”和“证明坐标逻辑正确”属于两个不同阶段。

