Wcan 2013 autumn_trident_mizuno

WCAN 2013 Autumn　 トライデントコンピュータ専門学校　Webデザイン学科１年　水野裕太

自己紹介 トライデントコンピュータ専門学校Webデザイン学科１年 水野 裕太 「Webデザイナー目指して日夜修行中」 Twitter　@tim_my99 Facebook 水野 裕太

漫画の専門学校に入ってからWebデザイナーという仕事を知り、参考書を頼りにやってみると凄い楽しかった。

そこからWebデザイナーへの道が始まった。

https://www.cubeslam.com/ijjsjf

もしかして、

自分の書いたキャラクターが3Dで動き出すんじゃ

やるしかない

l  WebGL、Three.jsとは？

l  キャラクターデザイン過程

l  モデリング、モーション作成&ツール紹介

l  3DCG構成要素

l  Three.jsの説明

l  制作物DEMO

l  Three.jsを使った作品

今回使うThree.jsは

WebGLを扱いやすくするライブラリです。

l  ブラウザ上で3Dを表示するための標準仕様。

l  ブラウザでプラグイン(flash playerなど)なしで表示させる事ができる

l  WebGLはOpenGLをブラウザで使うためのAPI

Firefox 4 以降

Chreome 9 以降

Safari 5.1以降

Opera 12以降

IE 11以降

○

○

△

△

○になりそう

Android IOS

Firefox for Mobile 以降

Google Chreome for Android 25 以降

Opera Mobile 12 以降

Android ブラウザ　 以降

○(Android

4 以降)

○

○

△

△(iAdのみ)

l WebGLを扱いやすくしてくれるライブラリ。(jQueryのような感じです)

l Three.jsを使うとJavaScriptの知識の範囲でWebGLを使う事ができます。

アレク・サンダー

両方とも無料で使う事ができます。

MetasequoiaはWindowsのみ

BlenderはWindowsやMACなどで動きます。

モーションをさせるにはまずボーンという骨組みを入れます。

ボーンとモデリングデータを合体させ連動して動くようにします。

各フレームにポーズを入れるとその間の動きを自動的に作ってくれます。

このエクスポートしたJSONの中にアニメーションやテクスチャのデータが入っています。

Blenderのデフォルト設定ではJSON形式にエクスポートできません。

ダウンロードしたThree.jsのフォルダの中にあるプラグインをBlenderに設定してエクスポートできるようにします。

プログラム

l  描画を行なうレンダラーを作成 　renderer = new THREE.WebGLRenderer() 　renderer.setSize (width,height); 　　　(横の描画領域のサイズ, 縦の描画領域のサイズ); 　　　　　　　　　　　　 l  シーンの作成 　scene = new THREE.Scene(); l  カメラを作成 　camera = new THREE.PerspectiveCamera(); 　camera.position.set( 0, 0, 300 ); 　　　　　　　　　　　( x軸の値, y軸の値, z軸の値 ); l  ライトを作成 　light = new THREE.DirectionalLight(0xffffff); 　light.position = new THREE.Vector3(0.5,0.5,0.5); 　　( x軸の値, y軸の値, z軸の値 ); 　

l JSONを読み込む 　var loader = new THREE.JSONLoader(); 　loader.load(“hero.js", createScene); 　　　　　　JSONファイルへのパス

　　　　　　　　　　　　　　　　　　この他にも設定があります

DEMO

ど素人

知識がないのに

どうしろと？

やれば分かるさ

迷わず行けよ

ご清聴ありがとうございました