coursor交互式360视频/图像背景html5 bootstrap
问题描述:
标题说明了一切。我正在寻找360视频或360图像作为使用bootstrap开发的html5网站的背景。并且视频/图像应该根据光标位置移动。我搜索了相当长的时间,但找不到任何东西。 如果有人知道我可以学习的任何来源,请让我知道。coursor交互式360视频/图像背景html5 bootstrap
答
您可以通过对aframe.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>
您可以设置可以选择使用 '一个天空' 或 'A-videosphere'(aframe videosphere documentation),使查找控件(参见文档)的情景。默认的Aframe行为将允许用户点击并拖动来旋转场景。
如果您分叉Aframe回购并修改look-controls.js file您可以使其不按住鼠标按下光标。
我已经分叉了框架,并在这里进行了更改,如果你想看到区别:https://github.com/nleoutsa/auto-follow-aframe。这是一个非常小的变化。
希望这会有所帮助! -Nick Leoutsakos