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も実行している |
< 前へ ｜1 ｜2 ｜3｜4 ｜5 ｜6 ｜次へ >
本記事は『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月号より）
