Tumblr上で繰り広げられるエクストリームなコンテンツ
「ときめきshowerメモリーズ」
【CONCEPT】
ベースとなるPC-88ゲームの世界観に他のカルチャーをミックス
|
|
▲音楽チャンネル内のサイトとして、ギャルの服装に90年代のヒップホップの要素やトレンドカラー(パープル)を意図的に盛り込んでいる。「ア・トライブ・コールド・クエスト」のジャケットのカラーリングの水着や、シカゴブルズのブリンブリンなどもその一つだ
|
【CODING】
voodoo.jsを使ってブラウザ内で3Dオブジェクトを表示
|
<style>
/* ヤシを置く要素を絶対値指定 */
#yashiContainer {
position: absolute;
left: 100px;
top: 270px;
}
</style>
<script type="text/javascript">
//ページが読み込まれたときに実行されるスコープ
window.onload = function()
//voodoo.jsのオプションを指定
var c = new voodoo.Options();
c.fovY = 45 ;
c.aboveZIndex = 10 ;
//voodoo.jsのエンジンをインスタンス化
voodoo.engine = new voodoo.Engine(c);
//voodoo.jsのVoodooJsonModel関数を使用し、
別ファイルのJSONファイルを埋め込む
// 3DオブジェクトのJSONファイルは、three.js付属の
変換スクリプトを使用してBlender形式から変換
new VoodooJsonModel({
//3Dオブジェクトを埋め込む要素を指定
elementId: 'yashiContainer',
//3DオブジェクトのJSONファイルの場所を指定
jsonFile: 'http://sstv-tokimeki.tumblr.com/yashi.js',
//3Dオブジェクトの大きさ
offsetWidthMultiplier: 2/3,
scale: 49
// 3Dオブジェクトの回転
rotationX: Math.PI/2 ,
rotationY: Math.PI/-3
});
}
</script>
|
◀▲hnnhnさんが記述した3Dのヤシの木を配置するJavaScriptと、サイトでの表示結果。ここで使用しているvoodoo.jsは、3Dオブジェクトのライブラリ「three.js」を簡単に使うというコンセプトで開発されたプラグイン
|
|
◀▲Tumblrの仕様上、JSONファイルをスタティックファイルアップローダーでアップロードすると、サブドメインが変わってしまい、非同期でダウンロードする際にブラウザが危険なコードと認識してしまう。そのため、TumblrにJSONのみを書いたページを作ることでサブドメインの変更なしに読み込めるようにした。また、同じくTumblrの仕様上、JSONファイルにHTML宣言が挿入されてしまうため、挿入されたコードを削除するJavaScriptも実行している
|
本記事は『MdN』2014年2月号(vol.238)からの転載です。
そのほかには下記のような記事が掲載されています。
(▼クリックすると画像が大きく表示されます)
特集のすべての記事は誌面でお読みになれます。
月刊『MdN』掲載記事号の情報はこちら!
- ■そのほかの月刊『MdN』からの転載記事
- 「印刷の魔法をもう一度信じてみる?」(『MdN』2013年12月号より)
- 「新しいイラストシーンを作ったイラストレーターたち」(『MdN』2013年11月号より)
- 「マンガのタイトルデザインの考え方」(『MdN』2013年10月号より)
- 「マンガとアニメのグラフィックデザイン」(『MdN』2013年9月号より)
- 「フォトディレクションがうまくいく方法」(『MdN』2013年8月号より)
- 「WEBデザイン&電子書籍の新常識」(『MdN』2013年7月号より)