课程互动360视频/图像背景在html5引导

coursor interactive 360 video/image background in html5 bootstrap

本文关键字：背景 html5 引导 图像 程互动 视频      更新时间：2023-09-26

标题说明了一切。我希望有360视频或360图像作为我的html5网站使用bootstrap开发的背景。视频/图像应该根据光标的位置移动。我找了很长时间，但什么也没找到。如果有人知道任何来源，我可以学习这个，请让我知道。

您可以通过稍微修改一下frame.io来实现这一点。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://rawgit.com/nleoutsa/auto-follow-aframe/master/dist/aframe-master.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <video id="paris" autoplay loop="true" src="http://s3.amazonaws.com/hapyak_demos/css360/videos/paris360.mp4">
      </a-assets>
      <a-videosphere src="#paris"></a-videosphere>
    </a-scene>
  </body>
</html>

JsBin的演示

你可以使用'a-sky'或'a-videosphere' (frame videosphere文档)设置场景，并启用look-controls(参见文档)。默认的Aframe行为将允许用户点击和拖动来旋转场景。

如果你fork了Aframe repo并修改了look-controls.js文件，你可以让它跟随光标而不用按住鼠标。

我已经分叉了框架，并在这里做了更改，如果你想看到的差异:https://github.com/nleoutsa/auto-follow-aframe。这是一个很小的变化。

希望这对你有帮助!尼克Leoutsakos

相关文章：