○
category icon
2022-05-08
JavaScript - Three.js

Three.js を TypeScript で使う方法 ～ 初めての Three.js 入門編 ～

Three.js
0.140.0
profile
hikaru
Software Developer / DIY'er

この記事では、Vite ビルドシステムを利用して、超高速・簡単に TypeScript を使った three.js のセットアップ方法を記載します。

Demo

実際に動作するデモです。マウス操作にてカメラの移動ができます。

完成系は上記のように、3D 空間上に XYZ 軸を表す線が描画され、その周りをカメラがクルクル旋回するアニメーションになります。
さらに、OrbitControls というカメラ機能を使用しているので、マウスでカメラを操作することも可能です。

(1) 前準備

あらかじめ開発環境に Node.js をインストールしてください。
この記事では Node.js v16.14.2 LTS にて動作を確認しています。

(2) Vite セットアップ

shell
$ npm create vite my-app1 -- --template vanilla-ts
$ cd my-app1

  • npm create vite コマンドで、vite プロジェクトのセットアップを指示します。

  • my-app1 はプロジェクト名称です。

  • -- は後続するオプションがあることを指定することを示します。

  • --template vanilla-ts オプションで標準的な TypeScript のプロジェクトであることを指定します。

    なお、Vite には数種類のテンプレートが用意されており、Vue.js や React なども指定が可能です。

    項目 JavaScript テンプレート TypeScript テンプレート
    標準 vanilla vanilla-ts
    Vue.js vue vue-ts
    React react react-ts

  • cd my-app1 コマンドでカレントディレクトリを、今生成したプロジェクトに移動します。

(3) Three.js のパッケージを追加

shell
# three.jsパッケージを追加
$ npm i three@0.139.2

# three.jsのTypeScript型情報を追加
$ npm i -D @types/three@0.139.0

  • npm i three@0.139.2

    three.js パッケージをインストールします。@0.139.2 部分はバージョンを指定しています。この記事の再現性を高めるために執筆時点の最新バージョンを指定しています。省略して npm i three とすることで、コマンド実行時点での three.js の最新バージョンがインストールされます。

  • npm i -D @types/three@0.139.0

    three.js の TypeScript 型情報をインストールします。これをインストールしなくても開発環境のエディタによっては自動的に型情報を取得してくれたりしますが、取得しない環境もあるのでインストールしておいた方が安全です。

(4) index.html の変更内容

以下のようにすべて書き換えます。

index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite App</title>

  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

    #appElement {
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>

<body>
  <div id="appElement"></div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>

(5) src/main.ts の変更内容

以下のようにすべて書き換えます。

src/main.ts
// 描画先の要素
const appElement = document.querySelector<HTMLDivElement>('#appElement')!;

//
// ➊ three.jsセットアップ
//

// ライブラリの読み込み
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

// 座表軸
const axes = new THREE.AxesHelper();

// シーンを初期化
const scene = new THREE.Scene();
scene.add(axes);

// カメラを初期化
const camera = new THREE.PerspectiveCamera(50, appElement.offsetWidth / appElement.offsetHeight);
camera.position.set(1, 1, 1);
camera.lookAt(scene.position);

// レンダラーの初期化
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(0xffffff, 1.0); // 背景色
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(appElement.offsetWidth, appElement.offsetHeight);

// レンダラーをDOMに追加
appElement.appendChild(renderer.domElement);

// カメラコントローラー設定
const orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.maxPolarAngle = Math.PI * 0.5;
orbitControls.minDistance = 0.1;
orbitControls.maxDistance = 100;
orbitControls.autoRotate = true;     // カメラの自動回転設定
orbitControls.autoRotateSpeed = 1.0; // カメラの自動回転速度

// ➋ 描画ループを開始
renderer.setAnimationLoop(() => {
  // カメラコントローラーを更新
  orbitControls.update();

  // 描画する
  renderer.render(scene, camera);
});

  • ➊ three.jsセットアップ

    three.js で描画するための初期化処理部分です。OrbitControls カメラもここで初期化・設定しています。

  • ➋ 描画ループを開始

    three.js の描画のため、毎フレーム呼び出される処理です。
    OrbitControls.update メソッドを呼び出すことで、カメラの自動回転やマウスによる操作を行えるようにしています。

(6) 開発環境で実行

shell
$ npm run dev

npm run dev コマンドを実行することで、開発環境での実行結果をブラウザで確認できます。

コマンド実行後にブラウザで http://localhost:3000/ にアクセスすると、上記のような 3D 画面が描画されマウスなどで操作できるはずです。

(7) 本番環境用にビルドする

shell
$ npm run build

npm run build コマンドを実行すると、dist ディレクトリにビルド結果が出力されます。
本番環境の WEB サーバに dist ディレクトリ内のファイルをアップロードすれば、そのままブラウザで動作します。

おわりに

今回のソースコードの URL を記載しておきます。ライセンスは MIT としていますのでご自由に利用ください。

関連記事 ( JavaScript - Three.js )