はじめに

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

環境構築(CDN)

CDN で Three.js をインポートする方法は次の記事にまとめています。

環境構築(ローカル)

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

プロジェクトディレクトリの用意

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

sample

Three.js ライブラリの入手

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

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

公式サイト
NPM

公式サイトからの入手

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

NPM からの入手

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

ライブラリの管理

入手した 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 の内容を次に示します。

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 を示します。ソースコードでは、インポート文が不要であることが特徴です。シーンの内容としては、緑色の立方体が回転するだけのシンプルなアニメーションです。

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 でインポートした場合と同じ結果が得られました。

参考

Three.jsの公式ドキュメント

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

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