Three.js勉強1: 環境構築

# はじめに
以前、[React Three Fiber(R3F)に関する記事](https://qiita.com/skm_bnn/items/9bdca6e2965fe8fa61e5)を投稿しました。ReactではThree.jsを容易に扱えるとの噂で、触ってみましたが、そもそもThree.jsでできることが何なの分からず、環境構築止まりになってしまいました。そこで、本記事ではThree.jsを基礎から学びつつ、備忘録として記事にまとめてみたいと思います。

- [Three.js勉強1: 環境構築](https://qiita.com/skm_bnn/private/fe4c17ac65ce5c4a89db)
- [Three.js勉強1.5: 環境構築(ローカル編)](https://qiita.com/skm_bnn/private/4a9a739ec08a41f2588e)
- [Three.js勉強2: シーンの主要要素](https://qiita.com/skm_bnn/private/32f21e39ed40668041e9)
- [Three.js勉強3: 3Dオブジェクトの描画](https://qiita.com/skm_bnn/private/e0611cfd717b96f7ff98)
- [Three.js勉強4: アニメーションと再レンダリング](https://qiita.com/skm_bnn/private/9bd86ab51a829efc43ef)

# 環境構築
環境を構築する方法としては次の2つがあります。本記事では、1つ目の「CDNからのインポート」について記します。2つ目については、[公式リファレンスドキュメントにある『Option 1: Install with NPM and a build tool』](https://threejs.org/docs/#manual/en/introduction/Installation)をご確認ください。3つ目については、[この記事](https://qiita.com/skm_bnn/items/4a9a739ec08a41f2588e)をご覧ください。

- CDNからのインポート
- NPMとビルドツールの利用
- ライブラリをローカルにダウンロード

# プロジェクトの構造
最小限のThree.jsプロジェクトは次の構成で成り立ちます。なお、各ファイル名は例であり、特に ```main.js``` は ```index.html``` でインポートするファイル名に従ってください。

|ファイル|役割|
|---|---|
|```index.html```|Webページを表示する|
|```main.js```|three.jsを使ったシーンの定義|

# ファイル内容
## index.html
Webページを定義する ```index.html``` の内容を次に示します。

```html: index.html
<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="utf-8">
    <title>Webページのタイトル</title>
    <style>
      body {
        margin: 0;
      }
    </style>

    <!-- CDNからThree.jsのインポート -->
    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@バージョン/build/three.module.js",
          "three/addons/": "https://unpkg.com/three@バージョン/examples/jsm/"
        }
      }
    </script>
  </head>

  <body>
    <!-- three.jsを使ったシーンのインポート -->
    <script type="module" src="./main.js"></script>

  </body>

</html>
```

次の点に注意してください。
- ```<head>```要素にあるThree.jsのインポートでは```バージョン```にバージョンを指定する必要がある。最新のバージョンは[このページ](https://www.npmjs.com/package/three?activeTab=versions)で参照できる。(2023年12月22日時点では```v0.159.0```が最新である)
- ```<body>```要素にある描画シーンのインポートではプロジェクトに応じたファイル名を指定する必要がある。

### 具体例
次に```index.html```の具体的な例を示します。
```html: 
<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="utf-8">
    <title>Webページのタイトル</title>
    <style>
      body {
        margin: 0;
      }
    </style>

    <!-- CDNからThree.jsのインポート -->
    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@v0.159.0/build/three.module.js",
          "three/addons/": "https://unpkg.com/three@v0.159.0/examples/jsm/"
        }
      }
    </script>
  </head>

  <body>
    <!-- three.jsを使ったシーンのインポート -->
    <script type="module" src="./main.js"></script>
  </body>

</html>
```

## main.js
```main.js``` の内容を次に示します。

```js: main.js
// Three.jsのインポート
import * as THREE from 'three';

/* ----------- */
/* シーンの描画 */
/* ----------- */
```

シーンを描画するにあたり、Three.jsのインポートが必要になることを注意してください。

### 具体例
次に```main.js```の具体的な例を示します。
```js: main.js
import * as THREE from 'three';

// シーンの作成
const scene = new THREE.Scene();

// カメラの作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// レンダラーの作成
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);
scene.add(cube);

// アニメーションの設定
const animate = function () {
  requestAnimationFrame(animate);

  // オブジェクトの回転
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
};

animate();
```

# 具体例の動作結果
VSCodeの拡張機能Live Servreで```index.html```をローカル環境で立ち上げると、シーンが描画されます。具体例の描画では、緑色の立方体が回転しているアニメーションが表示されます。

![動作結果.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844961/4b22e906-1d5d-ad75-6529-ea931fa37a2e.gif)

# 次回の記事

https://qiita.com/skm_bnn/items/32f21e39ed40668041e9

# 参考
- Three.jsの公式ドキュメント

https://threejs.org/docs/#manual/en/introduction/Installation

- NPMにおけるThree.jsのバージョン

https://www.npmjs.com/package/three?activeTab=versions