Three.js勉強1.5: 環境構築(ローカル編)

# はじめに
以前、[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)

# 環境構築(CDN)
CDN で Three.js をインポートする方法は次の記事にまとめています。

https://qiita.com/skm_bnn/private/fe4c17ac65ce5c4a89db

# 環境構築(ローカル)
ネット環境がない出先でも Three.js を触れればと思い、この記事に至ります。この記事に従って作業を踏むと、ネット環境がなくとも Three.js を動作させることができます。しかし、Three.js の更新はかなり活発であるため([このページの **[Version History]** から確認可能](https://www.npmjs.com/package/@types/three?activeTab=versions))、バージョンに注意してください。例えば、ローカルに落としたライブラリがいずれ古くなって、CDNで指定した最新バージョンのものと異なった動作となる可能性が考えられます。

## プロジェクトディレクトリの用意
Three.js プロジェクトで利用するディレクトリをあらかじめ用意しましょう。説明の便宜上、ここではプロジェクトディレクトリを ```sample``` とします。

```
sample
```



## Three.js ライブラリの入手
ローカルで Three.js を動作させるには、自身のマシン上にライブラリのソースファイルを保存する必要があります。

次のWebサイトからソースファイルを入手できます。

- 公式サイト
- NPM

### 公式サイトからの入手
次のページの [Code > download] から three.js ライブラリをダウンロードできます。

https://threejs.org/

### NPM からの入手
次のページで最新バージョンのライブラリをダウンロードすることができます。

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

## ライブラリの管理
入手した zip ファイルを展開し、```build``` フォルダにある ```three.js``` をプロジェクトディレクトリに移動させます。

```
sample
L three.js
```

## ソースファイルの用意
CDN のときと同様に、```index.html``` と ```main.js``` を作成します。

```
sample
L three.js
L index.html
L main.js
```

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

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

  <head>
    <meta charset="utf-8">
    <title>Three.js勉強1.5</title>
    <style>
      body {
        margin: 0;
      }
    </style>

    <!-- Three.jsのインポート -->
    <script type="module" src="./three.js"></script>
  </head>

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

</html>
```

### ```main.js```
具体的な例として、```main.js``` を示します。ソースコードでは、インポート文が不要であることが特徴です。シーンの内容としては、緑色の立方体が回転するだけのシンプルなアニメーションです。

```js: main.js
// シーンの作成
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```をローカル環境で立ち上げると、シーンが描画されます。CDN でインポートした場合と同じ結果が得られました。

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

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

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

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

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