JavaScript - Three.js · 2022-04-30 ·↻ 2022-05-08 · by hikaru

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

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

Three.js0.140.0

目次 (9)

Demo
(1) 前準備
(2) Vite セットアップ
(3) Three.js のパッケージを追加
(4) index.html の変更内容
(5) src/main.ts の変更内容
(6) 開発環境で実行
(7) 本番環境用にビルドする
おわりに

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

Demo

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

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

(1) 前準備

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

(2) Vite セットアップ

$ 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 コマンドでカレントディレクトリを、今生成したプロジェクトに移動します。

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

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

# 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 の変更内容

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

<!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 の変更内容

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

// 描画先の要素
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 メソッドを呼び出すことで、カメラの自動回転やマウスによる操作を行えるようにしています。