ときめきshowerメモリーズのGRAPHIC&CODING | デザインってオモシロイ -MdN Design Interactive-
CASE3_logo

Tumblr上で繰り広げられるエクストリームなコンテンツ

「ときめきshowerメモリーズ」



CONCEPT

  ベースとなるPC-88ゲームの世界観に他のカルチャーをミックス

M238_P078-3 M238_P078-3
▲音楽チャンネル内のサイトとして、ギャルの服装に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>
M238_P080-2b
◀▲hnnhnさんが記述した3Dのヤシの木を配置するJavaScriptと、サイトでの表示結果。ここで使用しているvoodoo.jsは、3Dオブジェクトのライブラリ「three.js」を簡単に使うというコンセプトで開発されたプラグイン

M238_P080-3a M238_P080-3b
◀▲Tumblrの仕様上、JSONファイルをスタティックファイルアップローダーでアップロードすると、サブドメインが変わってしまい、非同期でダウンロードする際にブラウザが危険なコードと認識してしまう。そのため、TumblrにJSONのみを書いたページを作ることでサブドメインの変更なしに読み込めるようにした。また、同じくTumblrの仕様上、JSONファイルにHTML宣言が挿入されてしまうため、挿入されたコードを削除するJavaScriptも実行している


前へ123|4 |56次へ >





本記事は『MdN』2014年2月号(vol.238)からの転載です。

M236_cover

紙版はこちら

amazon.co.jpで買う 楽天で買う

電子版はこちら

Amazon Kindleで買う マガストアで買う
雑誌オンラインで買う


そのほかには下記のような記事が掲載されています。
(▼クリックすると画像が大きく表示されます)

特集のすべての記事は誌面でお読みになれます。
月刊『MdN』掲載記事号の情報はこちら!

■そのほかの月刊『MdN』からの転載記事
印刷の魔法をもう一度信じてみる?」(『MdN』2013年12月号より)
新しいイラストシーンを作ったイラストレーターたち」(『MdN』2013年11月号より)
マンガのタイトルデザインの考え方」(『MdN』2013年10月号より)
マンガとアニメのグラフィックデザイン」(『MdN』2013年9月号より)
フォトディレクションがうまくいく方法」(『MdN』2013年8月号より)
WEBデザイン&電子書籍の新常識」(『MdN』2013年7月号より)


twitter facebook このエントリーをはてなブックマークに追加 RSS

この連載のすべての記事

アクセスランキング

9.14-9.20

MdN BOOKS|デザインの本

Pick upコンテンツ

現在