360 度全景与移动设备传感器控制

Question

您熟悉 Youtube 上的这些 360 度视频吗？这是an example，如果你不是。最好尝试在您的移动设备上查看它。摄像头的移动由移动设备传感器控制。

我正在尝试对图像做同样的事情。我发现了这个不错的脚本here。我所做的只是改变图像：

var folder = "images/360_degrees/";
    var sides = [
        [folder + "back.png", 0, 0, 100, 0, 0, 0],
        [folder + "front.png", 100, 0, 0, 0, 1.57, 0],
        [folder + "left.png", 0, 0, -100, 0, 3.14, 0],
        [folder + "right.png", -100, 0, 0, 0, 4.71, 0 ],
        [folder + "bottom.png", 0, 100, 0, 4.71, 0, 0 ],
        [folder + "top.png", 0, -100, 0, 1.57, 0, 0 ]
    ];

但是，我在使用此脚本时遇到了一些问题：

1. 我想让一个特定的图像成为中心，这意味着我希望它总是从同一个“立方体”侧（那个图像）打开并从这个点开始旋转。有可能这样做吗？毕竟，这些视频总是从同一点开始......
2. 通常（嗯，实际上大部分时间），当我旋转完我的设备后，这个立方体的运动会自行继续。设备停止移动后如何停止？

也许如果网上还有其他代码可以做同样的事情 - 我也很高兴有一个链接。

Answer 1

如果删除以下代码，

window.addEventListener("deviceorientation", function(e) {

        camera.rotation.set (
            !e.beta  ? 0 : e.beta * deg2rad,
            !e.gamma ? 0 : e.gamma * deg2rad,
            !e.alpha ? 0 : e.alpha * deg2rad
        );
    }, false);

您会看到 panaroma 在一个初始点是静态的。

现在调整

cube.rotation.x = -90; // tweak it to 0, 30 etc

同样，你会得到y，

cube.rotation.y = 0; // tweak it to 0, 30 etc

调整上述内容将回答您关于如何从特定点开始全景的第一个问题。

第二个问题的答案在于deviceorientation 事件监听器。您可以定义何时更改相机值的阈值。

 // this can be any condition.
 if (  ( e.beta * deg2rad ) > 1.1  || ( e.gamma * deg2rad ) > 0.01 ) 
 {        
   camera.rotation.set (
     !e.beta  ? 0 : e.beta * deg2rad,
     !e.gamma ? 0 : e.gamma * deg2rad,
     !e.alpha ? 0 : e.alpha * deg2rad
   );
}