【Three.js】360°パノラマ 動画プレイヤーの作り方（PCブラウザのみ） - Qiita
概要 昨今、VRブームに押されてFacebookやYouTubeで360°パノラマ動画の投稿が可能になったり、THETA Sやその他、360°撮影可能な新しいカメラが続々出るなど、360°パノラマ動画を取り巻く環境が大きく変わってきています。 そういった状況の中で、今回はThree.jsで360°の動画プレイヤーを作ったので、そのつくり方をご紹介します。 とは言っても、難しい話ではなく、以下の記事にあるコードのテクスチャの静止画の部分を動画に変えただけであります。 なので、下記の記事のコードの一部を修正します。 【Three.js】360°パノラマビューワーを作ってグリグリ操作出来るようにした（スマホ対応） ただ、注意事項として動画テクスチャを使う場合、HTML5のvideoタグを利用しているのでスマホで開いても、動画は再生されません。(ここはいづれ何とかする) 今回の修正で対応した項目は
全天球パノラマ動画を表示するJavaScriptライブラリ作った - aike’s blog
複数台のGoProを組み合わせて360度上も下も撮影できる動画カメラが一部で流行りつつあるようです。 こんなやつ。 http://home360.co.jp/freedom360.html http://freedom360.us/ 要はRICOH THETAの動画版なんですが、動画ということで機材の価格もだいぶ違うし、複数の動画を合成する作業もまだまだけっこう手間も時間もかかります。 そこまで頑張って動画を作っても、公開がまた大変です。フリーのスタンドアロンプレイヤーはありますが(これとか)、見る人にインストールさせるのはちょっと面倒だし、Flashで作られた全天球動画プレイヤーも良いものがいろいろあるものの、自由にダウンロードできて自分のサイトで手軽に使えるものは今はちょっとなさそうです。 そんなわけでJavaScriptのThree.jsを使ってさくっと全天球動画プレイヤーを作ってみ
Valiant360 Panorama Video Player
Starting up: // instantiate script on your container $('.valiant').Valiant360(); Additional Functions: // play $('.valiant').Valiant360('play'); // pause $('.valiant').Valiant360('pause'); // load new video file $('.valiant').Valiant360('loadVideo', 'path/to/video.mp4'); Acknowledgments: Thanks to Hugin and Panotools for maintaining such high-quality open source stitching software, Mr. Doob for Th
WebGLコンテンツをjQueryで作るJavaScriptライブラリ『jThree』
WebGLコンテンツをjQueryで作るJavaScriptライブラリ『jThree』
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PaView.js demo page
