○
category icon
2022-05-08
JavaScript - Three.js

Three.js を CDN で利用する方法

Three.js
0.140.0
profile
hikaru
Software Developer / DIY'er

three.js の利用方法にはいくつか方法があります。

  • (1) CDN (モジュール未使用版)

    この記事で紹介します。最も手軽な方法です。

  • (2) CDN (モジュール版)

    この記事で紹介します。CDN を使う場合 three.js 公式ではモジュール版を推奨しています。

  • (3) Webpack や Vite 等のビルドシステムを使用

    CDN を使わずとも、最近は簡単にビルドシステムから利用できます。高速で簡単に扱え、TypeScript も一瞬で使える Vite でのセットアップを私はおススメします。
    こちらの記事 で紹介します。

この記事では、もっとも簡単な (1) CDN (モジュール未使用版) と (2) CDN モジュール版 での利用方法を記載しています。

完成系は上記画像のように、3D 空間上に XYZ 軸を表す線が描画され、その周りをカメラがクルクル旋回するアニメーションになります。

さらに、OrbitControls カメラ という機能を使用しているので、マウスでカメラを操作することも可能です。

(1) CDN モジュール未使用版

CDN を使い、モジュール未使用版で実装するのが、一番手っ取り早く簡単な方法です。

しかし、three.js 公式のリファレンスでは CDN を使う場合はモジュール版を推奨しているようです。(モジュール版は次項に記載しています)

デモ: https://stackblitz.com/edit/threejs-cdn-2

index.html
<html>
  <head>
    <meta charset="UTF-8" />

    <!-- ➊ 外部スクリプト読み込み (three.js 本体とカメラコントローラー) -->
    <script src="https://unpkg.com/three@0.139.2/build/three.min.js"></script>
    <script src="https://unpkg.com/three@0.139.2/examples/js/controls/OrbitControls.js"></script>

    <!-- three.jsのサンプルプログラム -->
    <script>
      // ページの読み込みを待つ
      window.addEventListener(`DOMContentLoaded`, () => {
        // canvasを取得
        const myCanvas = document.querySelector('#myCanvas');

        // 
        // ➋ three.jsセットアップ
        // 

        // XYZ軸
        const axes = new THREE.AxesHelper();

        // シーンを初期化
        const scene = new THREE.Scene();
        scene.add(axes);

        // カメラを初期化
        const camera = new THREE.PerspectiveCamera(50, myCanvas.offsetWidth / myCanvas.offsetHeight);
        camera.position.set(1, 1, 1);
        camera.lookAt(scene.position);

        // レンダラーの初期化
        const renderer = new THREE.WebGLRenderer({ canvas: myCanvas });
        renderer.setClearColor(0xffffff, 1.0); // 背景色
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(myCanvas.offsetWidth, myCanvas.offsetHeight);

        // カメラコントローラー設定
        const orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
        orbitControls.maxPolarAngle = Math.PI * 0.5;
        orbitControls.minDistance = 0.1;
        orbitControls.maxDistance = 100;
        orbitControls.autoRotate = true;     // カメラの自動回転設定
        orbitControls.autoRotateSpeed = 1.0; // カメラの自動回転速度

        // ➌ 描画ループを開始
        renderer.setAnimationLoop(() => {
          // カメラコントローラーを更新
          orbitControls.update();

          // 描画する
          renderer.render(scene, camera);
        });
      });
    </script>
  </head>

  <!-- ➍ three.jsの描画先canvas -->
  <body>
    <canvas id="myCanvas" style="width: 100%; height: 100%"></canvas>
  </body>
</html>

➊ 外部スクリプト読み込み (three.js 本体とカメラコントローラー)

index.html
<!-- ➊ 外部スクリプト読み込み (three.js 本体とカメラコントローラー) -->
<script src="https://unpkg.com/three@0.139.2/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.139.2/examples/js/controls/OrbitControls.js"></script>

three.js の外部ライブラリを CDN から読み込んでいます。
OrbitControls カメラも使いたいので、個別に外部スクリプトとして読み込んでいます。

➋ three.js セットアップ

index.html
// 
// ➋ three.jsセットアップ
// 

// XYZ軸
const axes = new THREE.AxesHelper();

// シーンを初期化
const scene = new THREE.Scene();
scene.add(axes);

// カメラを初期化
const camera = new THREE.PerspectiveCamera(50, myCanvas.offsetWidth / myCanvas.offsetHeight);
camera.position.set(1, 1, 1);
camera.lookAt(scene.position);

// レンダラーの初期化
const renderer = new THREE.WebGLRenderer({ canvas: myCanvas });
renderer.setClearColor(0xffffff, 1.0); // 背景色
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(myCanvas.offsetWidth, myCanvas.offsetHeight);

// カメラコントローラー設定
const orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
orbitControls.maxPolarAngle = Math.PI * 0.5;
orbitControls.minDistance = 0.1;
orbitControls.maxDistance = 100;
orbitControls.autoRotate = true;     // カメラの自動回転設定
orbitControls.autoRotateSpeed = 1.0; // カメラの自動回転速度

three.js で描画するための初期化処理部分です。OrbitControls カメラもここで初期化・設定しており、モジュール未使用版では THREE.OrbitControls で利用できます。(モジュール版では OrbitControls で利用します)

➌ 描画ループを開始

index.html
// ➌ 描画ループを開始
renderer.setAnimationLoop(() => {
  // カメラコントローラーを更新
  orbitControls.update();

  // 描画する
  renderer.render(scene, camera);
});

three.js の描画のため、毎フレーム呼び出される処理です。

OrbitControls.update メソッドを呼び出すことで、カメラの自動回転やマウスによる操作を行えるようにしています。

➍ three.js の描画先 canvas

index.html
<!-- ➍ three.jsの描画先canvas -->
<body>
  <canvas id="myCanvas" style="width: 100%; height: 100%"></canvas>
</body>

特に説明不要かと思いますが、three.js を描画するための canvas 要素です。

(2) CDN モジュール版 (推奨)

CDN を使い、モジュールとして使う方法です。CDN を使う場合、three.js の公式リファレンスではこの方法を推奨しています。

デモ: https://stackblitz.com/edit/threejs-cdn

index.html
<html>
  <head>
    <meta charset="UTF-8" />

    <!-- ➊ 外部スクリプト読み込み (three.js 本体とカメラコントローラー) -->
    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@0.139.2/build/three.module.js"
        }
      }
    </script>

    <!-- three.jsのサンプルプログラム -->
    <script type="module">
      // canvasを取得
      const myCanvas = document.querySelector('#myCanvas');

      //
      // ➋ three.jsセットアップ
      //

      // ライブラリの読み込み
      import * as THREE from 'three';
      import { OrbitControls } from 'https://unpkg.com/three@0.139.2/examples/jsm/controls/OrbitControls.js';

      // XYZ軸
      const axes = new THREE.AxesHelper();

      // シーンを初期化
      const scene = new THREE.Scene();
      scene.add(axes);

      // カメラを初期化
      const camera = new THREE.PerspectiveCamera(50, myCanvas.offsetWidth / myCanvas.offsetHeight);
      camera.position.set(1, 1, 1);
      camera.lookAt(scene.position);

      // レンダラーの初期化
      const renderer = new THREE.WebGLRenderer({ canvas: myCanvas });
      renderer.setClearColor(0xffffff, 1.0); // 背景色
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(myCanvas.offsetWidth, myCanvas.offsetHeight);

      // カメラコントローラー設定
      const orbitControls = new OrbitControls(camera, renderer.domElement);
      orbitControls.maxPolarAngle = Math.PI * 0.5;
      orbitControls.minDistance = 0.1;
      orbitControls.maxDistance = 100;
      orbitControls.autoRotate = true;     // カメラの自動回転設定
      orbitControls.autoRotateSpeed = 1.0; // カメラの自動回転速度

      // ➌ 描画ループを開始
      renderer.setAnimationLoop(() => {
        // カメラコントローラーを更新
        orbitControls.update();

        // 描画する
        renderer.render(scene, camera);
      });
    </script>
  </head>

  <!-- ➍ three.jsの描画先canvas -->
  <body>
    <canvas id="myCanvas" style="width: 100%; height: 100%"></canvas>
  </body>
</html>

➊ 外部スクリプト読み込み (three.js 本体とカメラコントローラー)

index.html
<!-- ➊ 外部スクリプト読み込み (three.js 本体) -->
<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.139.2/build/three.module.js"
    }
  }
</script>

three.js の外部ライブラリを CDN から読み込んでいます。
モジュール版では、このような見慣れない書き方となります。

➋ three.js セットアップ

index.html
//
// ➋ three.jsセットアップ
//

// ライブラリの読み込み
import * as THREE from 'three';
import { OrbitControls } from 'https://unpkg.com/three@0.139.2/examples/jsm/controls/OrbitControls.js';

// XYZ軸
const axes = new THREE.AxesHelper();

// シーンを初期化
const scene = new THREE.Scene();
scene.add(axes);

// カメラを初期化
const camera = new THREE.PerspectiveCamera(50, myCanvas.offsetWidth / myCanvas.offsetHeight);
camera.position.set(1, 1, 1);
camera.lookAt(scene.position);

// レンダラーの初期化
const renderer = new THREE.WebGLRenderer({ canvas: myCanvas });
renderer.setClearColor(0xffffff, 1.0); // 背景色
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(myCanvas.offsetWidth, myCanvas.offsetHeight);

// カメラコントローラー設定
const orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.maxPolarAngle = Math.PI * 0.5;
orbitControls.minDistance = 0.1;
orbitControls.maxDistance = 100;
orbitControls.autoRotate = true;     // カメラの自動回転設定
orbitControls.autoRotateSpeed = 1.0; // カメラの自動回転速度

three.js で描画するための初期化処理部分です。モジュール版では import 文で THREE 本体と OrbitControls モジュールを読み込んでいます。

➌ 描画ループを開始

index.html
// ➌ 描画ループを開始
renderer.setAnimationLoop(() => {
  // カメラコントローラーを更新
  orbitControls.update();

  // 描画する
  renderer.render(scene, camera);
});

three.js の描画のため、毎フレーム呼び出される処理です。

OrbitControls.update メソッドを呼び出すことで、カメラの自動回転やマウスによる操作を行えるようにしています。

モジュール未使用版との違いはありません。

➍ three.js の描画先 canvas

index.html
<!-- ➍ three.jsの描画先canvas -->
<body>
  <canvas id="myCanvas" style="width: 100%; height: 100%"></canvas>
</body>

特に説明不要かと思いますが、three.js を描画するための canvas 要素です。

モジュール未使用版との違いはありません。

参考

three.js 公式リファレンス (インストール方法)

関連記事 ( JavaScript - Three.js )