交互体验Katia Gil Guzman

运动博物馆:五个展项的 3D 物理科普

一座可以在浏览器里逛的 3D 科学博物馆,五个展项各锁一类物理现象:玻璃蒸馏器里的多体碰撞、摆之林的连杆与动量、丝绸厅的布料与风、波之厅的空间干涉,以及从桌面浑天仪扩展到天象馆尺度的「三日」。值得看的是它把镜头动线当成策展来做——五个展项就是五个检查点,镜头在其间连续过渡,而不是切场景。

  • next.js
  • react
收录
打开中文版原作(英文)

6 步 · 3D 模型 · 导览视频

约 2MB,点击后才开始下载

3D 模型由原作者提供并授权使用(已取得作者授权(2026-09-20)),著作权归 Katia Gil Guzman

实现过程

难点不在于渲染单个物理效果,而在于让五种完全不同的模拟(碰撞、连杆、布料、波、引力)住在同一座馆里还显得是一个作品。作者的解法是先用 Blender 把整座馆的几何按可复跑的脚本生成,让尺度与材质从一开始就统一,再给每个展项配一种现象、一个镜头检查点。

  1. 建五个交互展项

    操作
    作者指令 · 中文译文(昆仑编辑部译)
    做一座精致的可交互科学博物馆,内含五个展项。
    
    概念
    建一座访客能在 3D 里穿行的漂亮博物馆。博物馆本身与其中的雕塑式展项必须在 Blender 里作出,保留可编辑的 .blend 源文件和一份可复现的资产生成脚本,再导出给交互式网页体验使用。访客体验里不要放实时模型:五个展项全部事先作好,访客玩的是它们固定的交互。不要提示词输入框、聊天界面或运行时内容生成。
    
    它应当像走进一座小而非凡的科学博物馆:建筑式的自然光、浅色矿物质墙面、节制使用的深色反光地板、黄铜细节、半透明玻璃、精心构图的阴影,以及克制的色彩点缀。让物件、光照、运动与镜头编排本身成为看点。每件装置都应有不同的轮廓,以不同方式占据空间——有的立在展台上,有的环绕访客。不要做成一个滚动式落地页或一格格的卡片。
    
    动线
    构建一个连贯的 3D 环境,恰好五个检查点。从博物馆内部开始,第一个展项可见,并给一个明确的「开始」动作。「上一个/下一个」与一个紧凑的 1–5 进度控件让镜头在检查点之间平滑移动;没有纵向页面滚动。到达检查点时,提供一个框好的近距离检视视角,带有受限的环绕控制和明确的返回方式。用简短的展项标题、一句邀请交互的话,以及该展项真正需要的那几个控件。提供触控友好的控件、键盘导航、可见的「重置」,以及减少动效时的镜头过渡。每个交互都要在几秒内给出明显、令人满足的视觉反应。整段导览应能作为一个约 2–3 分钟的演示跑通,并留有驻足实验的余地。
    
    实现这五个各不相同的展项:
    
    1. 玻璃蒸馏器——多体碰撞。
    一座立在石与黄铜底座上的高大精巧玻璃装置:球形的上部储液器、一个可见的闸门、一个宽漏斗、一段螺旋滑道、一处分流,以及若干收集容器。点击「释放珍珠」,数百颗发光的珠光小球便穿流其中。它们互相碰撞、弹跳,在狭窄的喉口处堆积,绕着弯道溢出,最后在容器里堆成令人信服的一堆。一个固定的闸门开关决定下一批珠子走哪条路。提供慢动作与重置。这是压轴展项:透明材质、可读的景深、精确的几何与有触感的碰撞行为都必须出色。可见外壳与碰撞体要一起建,让珠子真的从装置里穿过而不是穿模。使用实例化,并把粒子/刚体数量控制在测得的性能能撑住的范围。装饰性的高光不得遮住物理本身。
    
    2. 摆之林——连杆机构与动量。
    一件房间高度的动态雕塑,由悬挂的黄铜臂、配重、关节和大小不一的摆组成,像一棵分叉的机械树。访客可以拖住并松开一个标记明确的把手(拖拽受限),或按下固定的「启动」按钮。运动在这套铰接结构里传递:臂与臂交换动量,配重错相摆动,整件雕塑最终收束成一个不断变化的空间图案。第二个预设的释放方式产生明显不同的节奏。短暂消隐的轨迹可以揭示路径而不弄乱画面。使用真正带阻尼与关节限位的约束刚体动力学;让因果关系清晰可读,并有一个稳定的重置姿态。这件装置应当像一件精巧的活动雕塑,而不是又一条弹珠轨道。
    
    3. 丝绸厅——布料、风与接触。
    走进一座小展亭,里面有一片飘动的丝绸顶篷和几条长织带,围绕一个光滑的雕塑式环体(或类似的、在 Blender 里作出的独特形体)。访客在三种预设风态之间选择:静止、微风、阵风。织物应当鼓起、起皱、垂坠,并对与中央形体的接触作出反应。「阵风」制造一次戏剧性的横扫,短暂露出形体,随后布料重新落定。使用受限的实时布料模拟,带显式的距离/弯曲约束和适当分辨率的碰撞处理。选择能让行为稳定且看得出可信的锚点与碰撞几何。不要拿一个循环的正弦波 shader 冒充布料物理。宁要可读的褶皱、背光和丰富的织物材质,也不要过高的网格密度。
    
    4. 波之厅——空间场中的干涉。
    走到一个建筑穹顶下宽阔的圆形浅水盆边缘。盆面是一层发光的半透明薄膜或风格化的水,盆中有一个雕塑式的障碍物。两个固定的波源点可以分别或同时点击。访客可以选择预设的同相或反相,看扩散的波相遇、干涉、在边界反射,并形成不断变化的驻波图案。镜头可以下降到贴近水面,让波峰与波谷有空间感,再回到俯视揭示整体图案。实现一个稳定的数值波场模拟,带阻尼与合理的边界。让波场本身驱动表面位移与克制的光照效果。如实地把它描述为波的模拟;不要暗示做了完整的流体求解。
    
    5. 三日——轨道运动与沉浸式终章。
    最后一件装置以一个悬浮的微型太阳系仪开场。按下「走进去」,访客便进入同一系统的天象馆尺度视图,被三个发光天体的轨迹环绕。提供两组精选的初始条件:一组经过仔细验证的稳定编舞,以及对该初始条件的一个微小扰动——它会产生明显不同的轨迹。让访客可以回放并放慢时间,观察路径如何分岔。使用数值引力积分,限定模拟时长、控制时间步长、妥善处理近距离交会,并如实缩放。让明亮的天体与其轨迹区分开;把轨迹当作空间中的几何体而不是平面叠加。如果一个候选的稳定预设在数值上不可靠,换一个有据可查的预设并在上线前验证。以一个安静的、回望整座博物馆的视角收尾,并提供「再逛一次」的动作。
    生成物
    建五个交互展项
    注

    一个 prompt 就把馆体、五个展项、动线与交互全部要了,后面五步全是在这个骨架上迭代。两处值得留意:它明确要求「不要在访客体验里放实时模型」——五个展项都事先在 Blender 里作好,访客玩的是固定交互;以及每个展项都写清了「不许用什么冒充什么」(不许拿正弦波 shader 冒充布料、不许暗示做了完整流体求解)。

  2. 加行走与鼠标视角

    操作
    作者指令 · 中文译文(昆仑编辑部译)
    加入第一人称移动:鼠标控制视角,方向键行走。
    生成物
    加行走与鼠标视角
    注

    第一版是相机在五个检查点之间飞,这一步把它变成「人在馆里走」。一句话的指令,改的是整个体验的身体感——从看幻灯片变成逛博物馆。

  3. 把展项排进开放的房间

    操作
    作者指令 · 中文译文(昆仑编辑部译)
    把展项排进一个开放的房间,动线更清楚。
    生成物
    注

    能走了之后,动线问题就暴露出来。这一步的生成物在 3D 里最直观:正俯视一看,五个展台怎么围着走廊布置、彼此留了多少空,一目了然。

  4. 点击展项推近查看

    操作
    作者指令 · 中文译文(昆仑编辑部译)
    点击某个展项时推近它,并让房间更丰富。
    生成物
    点击展项推近查看
    注

    「推近」不是缩放,是相机飞到展项前的一个精心框好的机位。我们抓图时量过:切换展项后相机要飞约 8 秒才停——这段过渡本身就是作品的一部分。

  5. 在检视视角再点一次启动

    操作
    作者指令 · 中文译文(昆仑编辑部译)
    在检视视角下再点一次展项,让它动起来。
    生成物
    在检视视角再点一次启动
    注

    推近与启动拆成两次点击:第一次只是看,第二次才让它动。观众先看清楚静态结构,再看它怎么运动——这是科普展项和游戏特效的分别。

  6. 改善材质与光照

    操作
    作者指令 · 中文译文(昆仑编辑部译)
    给雕塑更丰富的表面质感,并让光照更有意图。
    生成物
    改善材质与光照
    注

    最后一步只动材质与光。导出的 glb 里零纹理、全靠 PBR 参数与 KHR_materials_transmission 的玻璃透射——玻璃蒸馏器就是这一步的代表作,3D 里飞过去看它对光的折射。

据以下公开资料整理,核对于 。 指令原文引自作者公开的构建记录;编辑部注与其中的判断由昆仑编辑部撰写,不代表原作者观点。

本页是昆仑编辑部撰写的导读,不包含作品内容。作品著作权归 Katia Gil Guzman 所有,请前往原地址体验。 缩略图由本站截取。