Youtube Data APIとYoutube Player APIを使用して、サムネイル表示の上にマウスカーソルを重ねるとプレビュー再生します。
http://bl.ocks.org/sfpgmr/raw/0671168256d7b4c09d34/
- d3.js
- q.js
SFPGMR sfpgmr
Youtube Data APIとYoutube Player APIを使用した勉強を兼ねたサンプルコードです。
まずプレイリスト一覧を表示します。クリックするとプレイリストの中身をサムネイル表示します。 サムネイルの上にマウスカーソルを重ねるとプレビュー再生します。
ChannelIDを変更すると他のチャンネルのプレイリストを表示します。
※このサンプルは「Open in a new window」で確認してください。
sfpgmr
/ The_Horse_in_Motion.jpg
Last active
August 29, 2015 14:15
Three.jsでエドワード・マイブリッジの馬の連続写真をアニメーションする
View this code at http://livecoding.io/3758456
SVGによる馬のアニメーションです。 エドワード・マイブリッジの「Horse in motion」をInkscapeでトレースし、各馬をセル化してアニメーションしています。
エドワード・マイブリッジの「Horse in motion」をInkscapeでトレースし、各馬をセル化したものをthree.jsのshapeに変換し表示しています。
見ていただくとわかりますが、Bugが残ってます。あとIEとFirefoxでは動作しません。私のコードが悪いようです。 下記のURLから動くデモが見れます。
エドワード・マイブリッジの「Horse in motion」をInkscapeでトレースし、各馬をセル化したものをthree.jsのshapeに変換し表示しています。
下記のURLから動くデモが見れます。Windows 10 Tech Preview 9926 のIE11では動作しませんでした。ひょっとするとIE11ではそもそも動作しないのかもしれません。原因は不明ですが。。
http://bl.ocks.org/sfpgmr/855ad392435fcdd87584
※前回のバグは下記記事が糸口となり解決しました。
Converting SVG paths with holes to extruded shapes in three.js
エドワード・マイブリッジの「Horse in motion」をInkscapeでトレースし、各馬をセル化したものをthree.jsのshapeに変換し表示しています。
3Dっぽく回転させてみてます。
下記のURLから動くデモが見れます。Windows 10 Tech Preview 9926 のIE11では動作しませんでした。ひょっとするとIE11ではそもそも動作しないのかもしれません。原因は不明ですが。。
エドワード・マイブリッジの「Horse in motion」をInkscapeでトレースし、各馬をセル化したものをthree.jsのshapeに変換し表示しています。