C#関連のブログなのですが、WebアプリもつくってみたいのでJavaScriptの勉強もしています。ただJavaScriptは実行してみないとエラーに気づくことができません。その点、TypeScriptならコーディングの最中でもエラーに気づくことができます。またVisualStudioのIntelliSenseも利用できるので初心者におすすめだと思います。

Three.jsはHTMLの3D技術「WebGL」を扱いやすくしたフレームワーク。Three.jsを使えばGPUによる本格的な3D表現をプラグインなしで作成することができるのです。

ではどうやって使えばいいのでしょうか?

まずVisualStudioで「新しいプロジェクトを作成」から「空のNode.jsコンソールアプリケーション」を選択。

プロジェクトフォルダ内にHTMLファイルを作成します。

次にソリューションエクスプローラーのnpmを右クリックして「新しいnpmパッケージをインストールする」を選択、「three」を検索してインストールします。

そのあとtsconfig.jsonを編集します。

tsconfig.json

app.tsファイルを編集します。

app.ts

以下のコードは赤い立方体を回転させながら画面のなかを移動させます。

あとはコンパイルするだけです。

コンパイルすると以下のようなJavaScriptのコードが生成されています。

HTMLの3D技術「WebGL」を扱いやすくしたフレームワークというだけあって、OpenTKよりも簡単に使えそうです。