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 ]
    ];

但是，我遇到了这个脚本的一些问题：

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

也许如果网上还有其他任何代码做同样的事情 - 我也很乐意与他们建立链接。

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
   );
}

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

1 个答案: