coursor interactive 360 video/image background in html5 bootstrap
Question
title says it all. I am looking to have 360 video or a 360 image as background of my html5 website developed using bootstrap. and the video/image should move based on cursor position. i searched for a fair amount of time but could not find anything. If anyone knows any source where i can learn this please let me know.
1 answers
solution1
1 2017-02-15 20:37:45
You could achieve this with a slight modification to 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>
You can setup the scene using either 'a-sky' or 'a-videosphere' ( aframe videosphere documentation ) and enable look-controls (see docs). Default Aframe behavior will allow a user to click and drag to rotate the scene.
If you fork the Aframe repo and modify the look-controls.js file you can make it follow the cursor without holding the mouse down.
I've forked aframe and made the changes here if you want to see the diff: https://github.com/nleoutsa/auto-follow-aframe . It's a very small change.
Hope this helps! -Nick Leoutsakos
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.