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

360 degrees panorama with mobile device sensor control

本文关键字：传感器 控制 移动 全景 360度      更新时间：2023-09-26

你熟悉Youtube上的这些360度视频吗？下面是一个示例，如果您不是。最重要的是尝试在您的移动设备上查看它。相机的移动由移动设备传感器控制。

我正在尝试对图像做同样的事情。我在这里找到了这个不错的脚本。我所做的只是更改图像：

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. 通常（嗯，实际上大多数时候），当我完成旋转我的设备时，这个立方体的运动会自行继续。设备停止移动后如何停止它？

也许如果网上有任何其他代码可以做同样的事情 - 我也很高兴有指向它们的链接。

如果删除以下代码， 

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

你会看到泛香气在一个初始点是静态的。

现在调整值， 

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
   );
}
相关文章：