WCAN 2013 Autumnライトニングトーク資料。 トライデントコンピュータ専門学校1年水野裕太 「Web歴半年!? プログラムど素人の僕がThree.jsを使って3D描画にチャレンジしてみた」

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

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

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

9. https://www.cubeslam.com/ijjsjf

10. もしかして、
自分の書いたキャラクターが3Dで動き出すんじゃ

11. やるしかない

12. l WebGL、Three.jsとは？
l キャラクターデザイン過程
l モデリング、モーション作成&ツール紹介
l 3DCG構成要素
l Three.jsの説明
l 制作物DEMO
l Three.jsを使った作品

13. 今回使うThree.jsは
WebGLを扱いやすくするライブラリです。

15. l ブラウザ上で3Dを表示するための標準仕様。
l ブラウザでプラグイン(flash playerなど)なしで表示
させる事ができる
l WebGLはOpenGLをブラウザで使うためのAPI

16. Firefox 4
以降
Chreome 9
以降
Safari 5.1
以降
Opera 12
以降
IE 11以降
○
○
△
△
○になりそう

17. Android
IOS
Firefox for
Mobile
以降
Google
Chreome
for
Android
25 以降
Opera
Mobile 12
以降
Android
ブラウザ
以降
○(Android
4 以降)
○
○
△
△(iAdのみ)

19. l WebGLを扱いやすくしてくれるライブラリ。
(jQueryのような感じです)
l Three.jsを使うとJavaScriptの知識の範囲で
WebGLを使う事ができます。

21. アレク・サンダー

29. 両方とも無料で使う事ができます。
MetasequoiaはWindowsのみ
BlenderはWindowsやMACなどで動きます。

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

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

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

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

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

37. プログラム

39. 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軸の値 );

40. l JSONを読み込む
var loader = new THREE.JSONLoader();
loader.load(“hero.js", createScene);
JSONファイルへのパス
この他にも設定があります

41. DEMO

43. ど
素
人
知
識
が
な
い
の
に
ど
う
し
ろ
と
？
や
れ
ば
分
か
る
さ
迷
わ
ず
行
け
よ

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