開発環境を構築してみました。最終的なソースコードはこちらに置きました。GitHubParcelを使うモジュールバンドラにはParcelを使います。TypeScriptとWebGLが動く環境が欲しかったのでWebpackを使うまでもないかなと思いParcelを使いました。parcel-bundlerHTML、TypeScriptの準備Parcelの起動htmlファイルsrc/index.htmlを作成する。index.tsを読み込むようにします。</body></html>TypeScriptファイルsrc/index.tsを作成する。helloと出力されるだけのTypeScriptです。下記コマンドでdevサーバが起動します。http://localhost:1234にアクセスしてコンソールにhelloと出力されていれば成功です。src/index.htmlWebGL(Three.js)環境を整える今回はThree.jsを使います。librarygithubのリポジトリです。threeTypeScript内でimportする。型定義ファイルも必要になるかなと思っていたのですが、three.jsライブラリ自体が型定義を持っているようです。THREE);threeではなくthree-jsモジュールのほうを使う?こちらの記事を見ていると、下記のような記述がありました。threeモジュールにはaddonが入っていないみたいです。three-jsを使えばaddonも使えるとのこと。three.js自体のバージョンは少し古くなってしまうようです。拡張も含めて入っていて簡単に含めることができるよう.どれだけ古くなるのかと思い、調べてみるとバージョン79を使っているようです。最新のThree.jsのバージョンは112ですのでだいぶ古い...。npmバージョンがあまりにも古いのでちょっとこれを使うのはやめておきます。今回はこちらのサンプルのソースコードを動かしてみることにします。three-orbitcontrols-tsのインストールaddonがないという下記エラーが出たのでインストールします。three-orbitcontrols-tsソースコード最終的なソースコードはこんな感じになりました。controls.update();}render();天球画像をグリグリ動かすことができました。kwst.site.。