【Three.js】開発環境構築（Vite編）

Three.js

Vite を使用して Three.js の開発環境を構築する方法について説明します。
Vite はモダンなフロントエンド開発ツールで、非常に高速なビルドとホットリロード機能を提供します。Three.js のプロジェクトを Vite を使ってセットアップする手順を以下に示します。

1. Vite プロジェクトの作成

まず、Vite を使って新しいプロジェクトを作成します。以下の手順に従ってください。

1.1 プロジェクトフォルダを作成

コマンドラインでプロジェクト用のフォルダを作成します。

mkdir my-threejs-project
cd my-threejs-project

1.2 Vite プロジェクトのセットアップ

次に、Vite を使って新しいプロジェクトを作成します。Vite のテンプレートを利用してプロジェクトを初期化します。

npm create vite@latest

プロンプトが表示されるので、以下の設定を選んでください：

  • プロジェクト名（例: my-threejs-project）
  • テンプレート: vanilla（シンプルな JavaScript 用テンプレート）

または、直接コマンドでテンプレートを指定してプロジェクトを作成することもできます。

npm create vite@latest my-threejs-project --template vanilla
cd my-threejs-project

1.3 必要な依存関係をインストール

Vite プロジェクトの依存関係をインストールします。

npm install

2. Three.js のインストール

次に、Three.js をインストールします。Vite で使えるように、npm を使って Three.js をインストールします。

npm install three

3. プロジェクトの構成

Vite プロジェクトは、デフォルトで次のような基本的なファイル構成になります：

my-threejs-project/
├── index.html         # HTMLファイル
├── src/
│   └── main.js        # エントリーポイントとなる JavaScript ファイル
├── package.json       # プロジェクトの設定ファイル
└── vite.config.js     # Vite の設定ファイル

3.1 index.html の修正

index.html は Vite によって自動的に読み込まれるので、Three.js を使うために必要な基本的な HTML を以下のように記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js with Vite</title>
</head>
<body>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

3.2 main.js の修正

src/main.js に Three.js を使った簡単なコードを記述します。例えば、回転する立方体を表示するコードを以下のように追加します。

import * as THREE from 'three';

const w = window.innerWidth;
const h = window.innerHeight;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

const scene = new THREE.Scene();
scene.add(cube);

const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000);
camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

4. 開発サーバの起動

Vite では、開発サーバが組み込まれており、簡単にプロジェクトをローカルで確認できます。以下のコマンドで開発サーバを起動します。

npm run dev

これで、Vite がプロジェクトをビルドし、デフォルトで http://localhost:5173 でブラウザを開いてアプリケーションを確認できます。回転する立方体が表示されるはずです。

5. 開発の進め方

これで、Vite と Three.js を使った開発環境が整いました。以降は以下のように開発を進めることができます。

  • src/main.js や新たに作成した JavaScript ファイルで Three.js の機能を追加する。
  • Vite のホットリロード機能で変更を即座にブラウザで確認しながら開発する。

6. その他の設定（オプション）

Vite では、必要に応じてさまざまな設定をカスタマイズできます。例えば、vite.config.js ファイルを編集して、プラグインの追加や最適化設定を行ったりできます。

// vite.config.js
export default {
  server: {
    open: true, // サーバ起動時にブラウザを自動的に開く
  },
};

これで、Vite を使った Three.js の開発環境が整いました。Vite の優れたビルド速度やホットリロードを活かして、効率的に Three.js のプロジェクトを開発できます。

タイトルとURLをコピーしました