使用 WebXR 的立体照片 VR 幻灯片

Question

我有一个庞大且不断增长的 JPS 和 MPO 格式立体（非 360）照片库，我想通过网站以某种形式的 VR 耳机立体幻灯片分享。

A-Frame 看起来很有前途，但到目前为止我还没有找到如何显示并排或其他立体图像格式的示例。

如果我只是错过了这样一个例子，如果有人能指出我的话，我将不胜感激。

如果没有，了解我将如何使用 A 帧或其他方式为立体图像创建幻灯片会很棒。

Answer 1

一种方法是

将立体图像分成两幅图像，这将对应于原始图像的两半。
使用 stereo component
渲染对应眼睛的每一半

需要两架飞机：

<a-plane material="src: #img; repeat:0.5 1" stereo="eye:left"></a-plane>
<a-plane material="src: #img; repeat:0.5 1; offset: 0.5 0" stereo="eye: right"></a-plane>

和设置

repeat 到 0.5 1 只渲染一半图像，
将右眼偏移 0.5 0

this glitch or with a cursor swapping the images in vr mode here

中的简单示例

使用 WebXR 的立体照片 VR 幻灯片

VR slideshow of stereoscopic photos using WebXR

three.js

aframe

webxr