Three.jsをTypeScriptと組み合わせて学んでみた

ブラウザ側のJavaScriptでGPUに命令して3Dを表示できるThree.js というライブラリがあります。
Three.js – JavaScript 3D Library

このThree.jsをTypeScriptで動かしながら、いくつかのサイトを写経してみました。
今回はその時に参考にしたサイトと、JavaScriptで書かれているThree.jsの記事をTypeScriptのプロジェクトで書き直した時のメモを上げておきたいと思います。

環境については以下のサイトを参考にし、Three.js + TypeScrpt + Webpackという組み合わせとしました。
最新版TypeScript+webpack 5の環境構築まとめ(React, Vue.js, Three.jsのサンプル付き) - ICS MEDIA

以下のサイトをTypeScriptに変換しつつ写経しました。

また他の例などが知りたければ、以下の公式サイトのサンプルを参考になりました。

CORSエラーですね。とりあえずローカルで簡易的なWebサーバを動かせばよかったので、今回は「goexec」を使いました。
Golangの開発環境がある場合ですが

go get -u github.com/shurcooL/goexec

で「goexec」をインストールし、以下のコマンドを開きたいHTMLファイルがあるフォルダで実行してWebサーバを起動しました。

$GOPATH/bin/goexec 'http.ListenAndServe(":8080", http.FileServer(http.Dir(".")))'

Three.jsのバージョンを最新ではなく任意のバージョンにしたい場合などがあります。
以下のコマンドでnpmでインストール可能なバージョンを確認し、package.jsonに記述しました。

npm info three versions

Webpackで必要なモジュールを纏めているので、ビルド前の.htmlファイルからはライブラリの参照の記述を削除しました。

TypeScript用の型定義である@types がないOrbitControlsのモジュールを直接読み込むため以下を行いました。

npm install --save three-orbitcontrols

でインストールし、以下をmain.tsに記述します。

declare function require(x: string): any;
const OrbitControls = require('three-orbitcontrols');

以上です。次にまた自分がThree.jsを始めるためのメモとして残しておきます。

ソースコードから理解する技術－ＵｎｄｅｒＳｏｕｒｃｅＣｏｄｅ