【Three.js】開発環境構築手順

Three.js の開発環境を構築するための手順を以下に示します。
Three.js は WebGL を利用して3Dグラフィックスを描画するためのライブラリで、主に JavaScript を使用して開発されます。開発環境を整える方法は複数ありますが、ここでは最も一般的な方法を紹介します。

1. 必要なツールをインストール

まず、開発に必要なツールをインストールします。

1.1 Node.js と npm のインストール

Three.js の開発には、Node.js と npm（Node Package Manager）が必要です。
公式サイトからインストールします。

インストール後、コマンドラインで以下のコマンドを実行し、正しくインストールされているか確認します。

node -v
npm -v

1.2 テキストエディタのインストール

コードを書くためのエディタが必要です。Visual Studio Code（VS Code）などが人気です。

2. プロジェクトフォルダの作成

次に、プロジェクト用のフォルダを作成します。

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

3. npm の初期化

プロジェクトの設定ファイル package.json を作成します。以下のコマンドで初期化を行います。

npm init -y

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

Three.js を npm を使ってインストールします。

npm install three

これで、node_modules フォルダ内に Three.js がインストールされます。

5. 開発用サーバのセットアップ

Three.js の開発では、ローカルサーバが必要です。以下のツールを使って簡単にローカルサーバを立ち上げることができます。

5.1 live-server のインストール

npm install --save-dev live-server

5.2 サーバの設定

package.json の scripts セクションに、以下のようにサーバを起動するコマンドを追加します。

"scripts": {
  "start": "live-server --open"
}

これで、npm start を実行することで、プロジェクトをブラウザで簡単にプレビューできます。

6. 基本的なファイル構成

プロジェクトの基本的なファイル構成は以下のようになります。

my-threejs-project/
├── node_modules/      # Three.js を含む依存ライブラリ
├── package.json       # プロジェクトの設定ファイル
├── index.html         # HTMLファイル
├── main.js            # JavaScriptファイル
└── styles.css         # スタイルシート

6.1 index.html

基本的な 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 Project</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <script src="node_modules/three/build/three.min.js"></script>
  <script src="main.js"></script>
</body>
</html>

6.2 styles.css

必要に応じて基本的なスタイルを追加します。

body {
  margin: 0;
  overflow: hidden;
}

6.3 main.js

Three.js を使って簡単な3Dシーンを描画する JavaScript を作成します。

import * as THREE from 'three';

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

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
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();

7. 開発サーバを起動

次に、npm start コマンドを実行して、開発用サーバを起動します。

npm start

これでブラウザに Three.js の3Dシーンが表示されるはずです。シーンには回転する立方体が描画されているはずです。

8. 開発の進め方

これで基本的な Three.js の開発環境が整いました。以降は、必要に応じて 3D オブジェクトを追加したり、カメラやライティングを調整したりして、プロジェクトを進めていきます。

以上で、Three.js の開発環境をセットアップするための手順は完了です！

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