🎨 高斯泼溅空间视差

Gaussian Splatting Spatial Parallax

使用 PlayCanvas 引擎加载 ml-sharp 生成的 3DGS 模型
原理:相机固定在原点,通过移动/旋转模型产生视差
支持陀螺仪、触摸、鼠标控制,体验 Apple Vision Pro 风格的空间效果

加载高斯泼溅模型...
0%

💡 上下滚动页面体验空间视差效果 | 陀螺仪控制更沉浸

🎮 控制设置
陀螺仪
视差强度 1.0
相机距离 3.0
自动旋转
滚动视差
滚动视差强度 1.0
📐 模型调整
垂直位置 0.0
X轴旋转 180°
Y轴旋转
Z轴旋转

📜 滚动视差演示

上下滚动页面,观察上方3D模型的视角变化。当模型在屏幕上方时,视角会向上倾斜;当模型在屏幕下方时,视角会向下倾斜。这模拟了透过窗户观看3D场景的效果。

🎯 Apple Vision Pro 风格视差

这种效果灵感来自 Apple Vision Pro 的空间照片功能。照片会根据在视口中的位置产生微妙的3D视差,让平面内容产生深度感。

🔧 技术实现

通过监听页面滚动事件,计算3D容器在视口中的相对位置(-1到1),然后将这个值映射到相机的俯仰角度,实现自然的视差效果。

📱 移动端优化

在移动设备上,还可以结合陀螺仪实现更沉浸的体验。开启陀螺仪后,倾斜手机可以从不同角度观看3D场景。

⚡ 性能优化

使用 passive 滚动监听器确保滚动流畅,通过平滑插值避免视角抖动,保证60fps的渲染性能。

陀螺仪
渲染
FPS: --