使用 PlayCanvas 引擎加载 ml-sharp 生成的 3DGS 模型
原理:相机固定在原点,通过移动/旋转模型产生视差
支持陀螺仪、触摸、鼠标控制,体验 Apple Vision Pro 风格的空间效果
💡 上下滚动页面体验空间视差效果 | 陀螺仪控制更沉浸
上下滚动页面,观察上方3D模型的视角变化。当模型在屏幕上方时,视角会向上倾斜;当模型在屏幕下方时,视角会向下倾斜。这模拟了透过窗户观看3D场景的效果。
这种效果灵感来自 Apple Vision Pro 的空间照片功能。照片会根据在视口中的位置产生微妙的3D视差,让平面内容产生深度感。
通过监听页面滚动事件,计算3D容器在视口中的相对位置(-1到1),然后将这个值映射到相机的俯仰角度,实现自然的视差效果。
在移动设备上,还可以结合陀螺仪实现更沉浸的体验。开启陀螺仪后,倾斜手机可以从不同角度观看3D场景。
使用 passive 滚动监听器确保滚动流畅,通过平滑插值避免视角抖动,保证60fps的渲染性能。