Upload
trident
View
2.201
Download
1
Embed Size (px)
DESCRIPTION
WCAN 2013 Autumnライトニングトーク資料。 トライデントコンピュータ専門学校1年水野裕太 「Web歴半年!? プログラムど素人の僕がThree.jsを使って3D描画にチャレンジしてみた」
Citation preview
WCAN 2013 Autumn トライデントコンピュータ専門学校 Webデザイン学科1年 水野裕太
自己紹介 トライデントコンピュータ専門学校Webデザイン学科1年 水野 裕太 「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
ど素人
知識がないのに
どうしろと?
やれば分かるさ
迷わず行けよ
ご清聴ありがとうございました