2016-09-14 3 views
0

タイトルはそれをすべて言っています。ブートストラップを使って開発されたhtml5ウェブサイトの背景として、360ビデオまたは360イメージを探しています。ビデオ/画像はカーソルの位置に基づいて移動する必要があります。私はかなりの時間を探しましたが、何も見つかりませんでした。 誰かが私がこれを学ぶことができるソースを知っているなら、私に知らせてください。coursorインタラクティブ360ビデオ/画像の背景html5のブートストラップ

答えて

1

aframe.ioをわずかに変更してこれを実現できます。

セットアップ 'スカイ' や '-videosphere'( aframe videosphere documentation)と有効ルック・コントロール(ドキュメントを参照)のいずれかを使用してシーンをすることができます

Demo on JsBin

<!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> 
。デフォルトのAframeの動作により、ユーザーはクリックしてドラッグしてシーンを回転させることができます。

Aframeレポをフォークしてlook-controls.js fileを変更すると、マウスを押し下げずにカーソルをたどることができます。

私は差分を表示したい場合はここに変更を加えました:https://github.com/nleoutsa/auto-follow-aframeそれは非常に小さな変化です。

希望すると便利です。 -Nick Leoutsakos