Three.jsインストール

Three.jsは、Webブラウザ上で3Dグラフィックスを表示するためのJavaScriptライブラリです。基本要素としてシーン、カメラ、レンダラーを使い、立体オブジェクトやライトを追加し、アニメーションを行えます。

使いやすいAPIで、リアルタイムの3D描画やインタラクティブなグラフィックスを簡単に実装できます。ゲームやデータ可視化、クリエイティブな作品に幅広く利用されています。

CDN（コンテンツデリバリネットワーク）を使用する
Three.jsをローカル環境で使う方法

CDN（コンテンツデリバリネットワーク）を使用する

CDNを利用することで、Three.jsのライブラリをインターネット経由で簡単に読み込むことができます。これにより、ローカルにファイルを保存する必要がなくなり、簡単にThree.jsを始められます。以下では、通常のCDN形式、モジュール形式、そして importmap を活用した形式について紹介します。

通常のCDN

通常のCDN形式では、Three.jsを <script> タグで読み込みます。この方法は古いブラウザにも対応しており、初心者にもわかりやすい形式です。three.min.js を使用することで、軽量化されたバージョンのThree.jsを簡単に導入できます。

<!DOCTYPE html>
<html>
<head>
  <title>Three.js Example</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/three@0.152.0/build/three.min.js"></script>
  <script>
    // ここにThree.jsのコードを書きます
  </script>
</body>
</html>

HTML

メリット: 簡単に導入できる。
デメリット: モジュール形式ではないため、モダンな開発環境には適さない。

モジュールのCDN

モジュール形式では、three.module.js を利用してESモジュールとしてThree.jsをインポートします。この方法は、モダンなJavaScriptの開発スタイルに適しており、新しいバージョンではCDNで提供されるThree.jsの非モジュール形式のスクリプトが存在しないため、モジュール形式を使用する必要があります。three.min.jsなど存在した場合でも非推奨などの警告がでます。

モジュール形式を利用することで、ES6の import/export を活用してThree.jsを柔軟に管理できます。この方法は、モダンなブラウザ環境やフレームワークを使用したプロジェクトに最適です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
      <script type="module">
        import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js';
      </script>
    </head>
    <body>
    </body>
</html>

JavaScript

メリット: モジュール形式を利用可能。
モダンな開発に最適。デメリット: 古いブラウザでは動作しない。

importmap を利用したモジュールのCDN

importmap を使うと、CDNパスを簡略化し、モジュール名でThree.jsをインポートできます。この方法は、コードの可読性を向上させ、複数のモジュールを効率的に管理するのに適しています。

importmap を使用すると、モジュール名とCDNパスをマッピングし、インポートを簡略化できます。モジュールが複数ある場合でもスムーズに管理できます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="importmap">
        {
          "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js"
          }
        }
    </script>
    <script type="module">
        import * as THREE from "three";
    </script>
</head>
<body>
</body>
</html>