はじめに

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

環境構築

環境を構築する方法としては次の2つがあります。本記事では、1つ目の「CDNからのインポート」について記します。2つ目については、公式リファレンスドキュメントにある『Option 1: Install with NPM and a build tool』をご確認ください。3つ目については、この記事をご覧ください。

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

プロジェクトの構造

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

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

ファイル内容

index.html

Webページを定義する index.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のインポートではバージョンにバージョンを指定する必要がある。最新のバージョンはこのページで参照できる。(2023年12月22日時点ではv0.159.0が最新である)
<body>要素にある描画シーンのインポートではプロジェクトに応じたファイル名を指定する必要がある。

具体例

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

main.js

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

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

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

具体例

次にmain.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をローカル環境で立ち上げると、シーンが描画されます。具体例の描画では、緑色の立方体が回転しているアニメーションが表示されます。

次回の記事

参考

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

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