create every day - 福野泰介の一日一創

3D空間で動画をくるくる回す JavaScript x three.js

2017/09/25 23:55:00
#js #3d 

ウェブで遊べる3Dライブラリ「three.js」を使ったIchigoJamの入門動画紹介ウェブアプリ

IchigoJam Intro Movies」 (元アプリ - css3d_youtube

マウスでくるくる回す操作プログラム js/controls/TrackballControls.js の止まりにくさを表す変数 dynamicDampingFactor を小さくしたので、離してからもくるくる回ってくれます。 ただ、ズームも合わせて滑るようになってしまうので、 dynamicDampingFactorZoom という変数があったらそっちを優先するように改造して js/controls/TrackballControlsZ.js にしました。

サンプルを元に自分好みにどんどん変更しちゃいましょう。(サンプル多数!
three.js全部ダウンロードすると228MBと結構重いので、今回サンプルのみのzip用意しました。
ichigomovies.zip (285KB)
動画を4つ変更するだけなら、htmlへYouTubeのidをコピペでOK!

VR空間を泳ぐように動画を探す体験とか楽しそうですね!
PCのパフォーマンスアップと便利なライブラリで、夢はどんどん広がりますが、実現速度は速まるばかり。

links
- ついにリアル公安9課誕生!オープンデータを推進する神戸市役所の本気!攻殻機動隊風、避難所ナビ3D
- iOS8 WebGL解禁記念! 触れるjig.jpロゴ

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY 福野泰介 - Taisuke Fukuno / @taisukef / high-res profile image