5日目 コードを書く

ようやく.

書きます.

 

まずはWebGLで3Dモデルをつくるの巻.

おさらいですが,WebGLは3DCG をWeb上で表示する標準仕様.仕組みは↓サイトの説明が分かりやすかった.

Webで3Dモデルを扱いたい |

 

WebGLのライブラリ比較あったので参考まで.他も見てみたけどThree.jsが広く使われてるっぽい.

WebGL 対応のライブラリの比較 - Qiita

 

canvasタグ: HTML5内でグラフィック描画用として設定されたタグ.JavaScriptを使用.アニメーションを一括で処理するようなオブジェクトやメソッドは無し.動きのあるコンテンツを作成する場合,JavaScriptによるループ処理の実装が別途必要.

 

コンテキスト: 描画処理を行うためのAPIを実装したオブジェクト.各種描画を行うためのメソッドを初めとして,描画を行う際に必要となるパラメータとしてのプロパティなど一式持つ.2dコンテキストは2次元の描画処理をサポート.WebGLを使うためにはWebGLコンテキストが必要.

wgld.org | WebGL: WebGL を始める前に canvas を知る |

 

まずは写経的なやつ.

これやる.

最新版で学ぶThree.js入門 - 手軽にWebGLを扱える3Dライブラリ - ICS MEDIA

 

 Three.jsのサイトでzipダウンロード

→jsファイル, HTMLファイル作成

→HTMLファイル実行

 

リンク先通り動く立方体完成.

 

めっちゃ簡単に見えて時間かかった.

エディタ久々.

 

途中Visual Studio Codeのショートカットキーが機能せず,長々格闘した.

結局解決せずコード優先.

 

今日これだけ.うーん.あんま進まなかった.

明日はUnityやろ.

 

以上