gpt4 book ai didi

javascript - html5 bootstrap 中的光标交互式 360 度视频/图像背景

转载 作者:太空宇宙 更新时间:2023-11-04 09:45:57 25 4
gpt4 key购买 nike

标题说明了一切。我希望使用 bootstrap 开发 360 度视频或 360 度图像作为我的 html5 网站的背景。并且视频/图像应根据光标位置移动。我搜索了相当多的时间,但找不到任何东西。如果有人知道我可以从中学习的任何来源,请告诉我。

最佳答案

您可以通过稍微修改 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>

Demo on JsBin

您可以使用“a-sky”或“a-videosphere”(aframe videosphere documentation)设置场景并启用外观控制(参见文档)。默认的 Aframe 行为将允许用户单击并拖动以旋转场景。

如果您 fork Aframe 存储库并修改 look-controls.js file你可以让它跟随光标而无需按住鼠标。

如果您想查看差异,我已经 fork 了一个框架并在此处进行了更改:https://github.com/nleoutsa/auto-follow-aframe .这是一个非常小的变化。

希望对您有所帮助!-Nick Leoutsakos

关于javascript - html5 bootstrap 中的光标交互式 360 度视频/图像背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39495379/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com