渲染决定它看起来怎样

实时 PBR(基于物理的渲染)用粗糙度、金属度和光照等参数描述表面怎样响应光。相同的几何体,改变材质参数和光源位置,会得到完全不同的观感。

首页使用 Three.js 经 React Three Fiber 驱动的实时渲染。程序化灯光和环境不依赖外部 HDR 图片;它并不是离线电影级路径追踪,也不意味着每一束光都被精确模拟。

物理决定它怎样运动

刚体物理引擎处理重力、碰撞、速度与约束。Rapier 在浏览器中计算这些运动,渲染引擎再将结果显示出来。二者职责不同,但可以协作。

首页的交互实验使用实际刚体与碰撞体。初始场景处于零重力展示状态;点击“Release gravity”后,物体会受重力影响,重置按钮将场景恢复。它是用于交互展示的模拟,不是经过工程验证的测量工具。

性能也是体验的一部分

高质量效果必须有边界。设备像素比、阴影分辨率和物体数量都需要控制。低动态偏好或不支持 WebGL 的设备应该看到可用的静态替代,而不是空白页面。

本示例文章用于预览。上线前可继续补充实际性能测量、不同设备的表现,以及准确的代码版本与引用。