ex-Workshop06『three.jsを使ってモデリングソフトを試作する』
•
8 likes•3,397 views
メディア芸術表現基礎ワークショップ ex-Workshop06「形態と機能Ⅱ コンピュテーショナル・リアライゼーション」にて、『three.jsを使ってモデリングソフトを試作する』ワークショップ時に使用したスライド。 【サイト】 http://www.iamas.ac.jp/6072 【更新履歴】 2013年11月27日：ver.1.0.1 2013年11月23日：ver.1.0
Recommended
More Related Content
Similar to ex-Workshop06『three.jsを使ってモデリングソフトを試作する』
Similar to ex-Workshop06『three.jsを使ってモデリングソフトを試作する』 (20)
Recently uploaded
Recently uploaded (6)
ex-Workshop06『three.jsを使ってモデリングソフトを試作する』
- 1. ! three.jsを使って モデリングソフトの試作する メディア芸術表現基礎ワークショップ ex-Workshop06 「形態と機能Ⅱ コンピュテーショナル・リアライゼーション」 ver.1.0.1 © Takahiro Hirata
- 4. アンケート • 使用ブラウザ • プログラミングの経験 （C, C++, OpenGL, oF, javascript, html, three.js, WebGLなど） • 変数、関数、ライブラリ、if文、for文 © Takahiro Hirata
- 6. パソコン環境の確認 • MebiusRingをクリックしてブラウザで表示 • 環境の確認： - MebiusRingが表示 - 左上のボタンで、stlデータをダウンロードできるか © Takahiro Hirata
- 8. 今日の流れ ① three.jsの説明 ② jsdo.itを使ってみる ③ jsdo.it上でthree.jsをプログラミング © Takahiro Hirata
- 13. three.jsの欠点 • ブラウザが限定される - Crome、Firefox、OperaはOK - Safariは設定が必要 - IEは、IE11からだけど△ • 表示されない場合：各ブラウザでWebGLの設定方法 © Takahiro Hirata
- 14. three.jsの参考になるもの • サイト：田所さんの授業の資料 Webデザイン 第10回：HTML5実践 Three.jsで3Dプログラミング • 書籍： - three.jsによるHTML5 3Dグラフィックス〈上〉―ブラウザで実 現するOpenGL(WebGL)の世界（内容充実、今回参考にしてます） - 「WebGL/three.js」ではじめる3D-CGプログラミング - JavaScript逆引きハンドブック（多少載ってます） © Takahiro Hirata
- 17. three.jsを プログラミングするには？ • ローカル環境でテキストエディタを使ってプログラミン グが可能だが、サーバーなど設定が不要 • 今回は、web上でプログラミングできる、jsdo.itを使用 • jsdo.itの良い点 - javascriptをweb上でプログラミングできる - ブラウザ上で実行 © Takahiro Hirata
- 19. jsdo.itを操作する一連の流れ • 上部の+ボタン押して新規プロジェクト作成 • 右の再生ボタンで実行 • javascriptの編集は - javascriptタブをクリック - テキストを編集して右の再生ボタンで実行 ('Hello, World!’内の文字を変更してみよう） • セーブ方法：上部の「saved」ボタンを押す or 「 +S」キー （ショートカットキーの詳細は、右下） • 自分のアカウントのページを表示する場合は、URLで、 http://jsdo.it/アカウント名（http://jsdo.it/dengurix2/） © Takahiro Hirata
- 20. three.jsのサンプルを触ってみる • 今回用意したcubeのサンプルを触ってみる - cubeをforkして - 右画面の再生ボタン押して実行 - マウス操作（左ドラッグ：回転、中ホイール：前後移動、右：上下移動） - “download” ボタンをクリックしてstlをダウンロード © Takahiro Hirata
- 23. ３Dフォーマットの種類 • メジャーな２つ - stl：色の情報無しの3D情報（シンプル） - obj：色やテクスチャー付きの３D情報 • その他のフォーマット © Takahiro Hirata
- 25. stlフォーマットの中身 solid cube-ascii! ! ! ! //ファイルの始まり! facet normal 0 0 1!! ! //1番目のポリゴン、normal：法線座標（x,y,z）! outer loop! vertex 0.0 0.0 0.0! ! //1番目の頂点座標（x,y,z）! vertex 1.0 0.0 0.0! ! //2番目の頂点座標（x,y,z）! vertex 0.0 1.0 0.0! ! //3番目の頂点座標（x,y,z）! ! ! ! endloop! endfacet! ! facet …! …! endfacet! endsolid! ! ! ! 3番目の頂点 //ファイルの終わり (0.0, 1.0, 0.0) 法線の向き 2番目の頂点 １番目の頂点 (1.0, 0.0, 0.0) (-1.0, 0.0, 0.0) © Takahiro Hirata
- 26. stlフォーマットのファイルを作ってみる solid cube-ascii! facet normal 0 0 1! outer loop! vertex 0.0 0.0 0.0! vertex 1.0 0.0 0.0! vertex 0.0 1.0 0.0! endloop! endfacet! endsolid • ◀クリックするとサイトを表示します 上記内容をテキストエディタ等でファイルにコピペし test.stlとして保存（※テキストの最後に改行が必要） （テキストエデット.appを使用の場合は、テキストエデット.appの環境 設定で標準テキストにチェック後、ソフトを再起動） © Takahiro Hirata
- 28. 3Dプリンターで出力できる ３Dデータを作るには • 複数の面（ポリゴン）で囲まれたstlデータを作れば良い • 注意点： - 面（ポリゴン）面との間に 間が出ないようにする - 法線は外向き © Takahiro Hirata
- 30. cubeサンプルコードの流れ • 全体で使用する変数（数字や文字やオブジェクトを入れる箱）を用意 • 実行する関数を記述 • 初期化する関数：（最初に一度だけ実行） - htmlの設定 - レンダラ（描画）の設定 - 空間（シーン）を用意 - カメラを用意してシーンに配置（マウスでカメラを操作する設定も） - ライトを用意してシーンに配置 - ジオメトリ（オブジェクト）を作ってシーンに配置 • ループする関数：（何回も実行） - カメラからの見えるシーンをレンダリング © Takahiro Hirata
- 36. 既存のジオメトリ関数を修正 • 作りたい形に近いGeometry関数を持ってきて修正 • サンプル：my geometry （CubeGeometryを修正して使う場合） • three.js-r62/build/three.jsの32858行∼33010行を持って くる （フォルダ内で ”CubeGeometry” を検索して見つける） © Takahiro Hirata
- 37. ０からmeshを作る • 頂点と面と法線の設定をしてシーンに追加 • 難易度高い • 一応サンプルを用意しました original mesh © Takahiro Hirata