three.jsのインストールと使い方

three.jsとは何ですか?

Three.js は、JavaScript に基づくオープンソース 3D グラフィックスライブラリであり、さまざまな 3D シーン、オブジェクト、特殊効果を作成および表示するために使用されます。開発者がブラウザで複雑な 3D グラフィックスを簡単にレンダリングできるようにする豊富な機能と API を提供します。

Three.js は、カメラ、ジオメトリ、マテリアル、光源などを含む、簡略化されたインターフェイスとツールのセットと、影、透明度、テクスチャマッピングなどのさまざまなレンダリング技術を提供します。Three.js を使用すると、開発者は基盤となる WebGL テクノロジを理解していなくても、少量のコードを記述するだけでインタラクティブで高性能の 3D シーンを作成できます。

Three.js は、Chrome、Firefox、Safari、Edge など、WebGL をサポートする最新のブラウザーで実行できます。ゲーム開発、ビジュアルデータ表示、仮想現実（VR）、拡張現実（AR）などの分野で広く使用されています。初心者でも経験豊富な開発者でも、Three.js を使用してさまざまな見事な 3D グラフィックアプリケーションをすばやく構築できます。

Three.js をインストールして使用する手順は次のとおりです。

Three.js ライブラリファイルをダウンロードするか、npm を使用して Three.js をインストールします

具体的な操作方法は前の質問の回答を参照してください。

Three.js ライブラリファイルを HTML ページに導入します。

Three.js ライブラリファイルを HTML ページの head セクションに導入します。

<head>
  <script src="/path/to/three.js"></script>
</head>

「/path/to/three.js」を実際の Three.js ライブラリファイルのパスに置き換えてください。

Three.js シーンとレンダラーを作成する

body セクションに div コンテナを作成し、JavaScript で Three.js シーンとレンダラーを作成します。シーンにはすべてのオブジェクト、カメラ、ライトが含まれており、レンダラはシーンを HTML キャンバス要素にレンダリングする役割を果たします。

<body>
  <div id="container"></div>

  <script>
    // 创建场景
    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.getElementById('container').appendChild(renderer.domElement);
  </script>
</body>

4. Three.js のジオメトリとマテリアルを作成する

ジオメトリとマテリアルはシーンで作成されます。ジオメトリにはオブジェクトの形状とサイズが含まれ、マテリアルには色やテクスチャなどのオブジェクトの表面プロパティが含まれます。

<body>
  <div id="container"></div>

  <script>
    // 创建场景
    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.getElementById('container').appendChild(renderer.domElement);

    // 创建几何体和材质
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({
    
     color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
  </script>
</body>

レンダリングシーン

最後に、Three.js シーンを JavaScript でレンダリングします。

<body>
  <div id="container"></div>

  <script>
    // 创建场景
    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.getElementById('container').appendChild(renderer.domElement);

    // 创建几何体和材质
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({
    
     color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 渲染场景
    function animate() {
    
    
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();
  </script>
</body>

three.jsの役割

Three.js は、Web ブラウザーでインタラクティブな 3D グラフィックスシーンを作成および表示するために使用されます。次の機能を実現できます。

3D オブジェクトの作成と管理: Three.js を使用すると、ジオメトリ (立方体、球、円柱など)、モデル、パーティクルシステムなどのさまざまな 3D オブジェクトを簡単に作成および操作できます。位置、回転、スケール、その他のプロパティを設定し、シーン内で組み合わせてレイヤー化することができます。

レンダリングとアニメーション: Three.js は、定義されたシーンとオブジェクトを HTML5 キャンバス要素にレンダリングできる強力なレンダリングエンジンを提供します。カメラの位置と視点を制御し、アニメーションループを利用してスムーズなモーション効果を実現できます。オブジェクトの回転、移動、色や透明度の変更を行って、さまざまなアニメーション効果を実現できます。

マテリアルとテクスチャ: Three.js はさまざまなマテリアルとテクスチャマッピングをサポートしており、オブジェクトにフォトリアルな外観を与えることができます。色、マップ、照明、影などを設定して、オブジェクトの視覚効果を高めることができます。組み込みのマテリアルタイプを使用したり、シェーダプログラムをカスタマイズして、より高度なレンダリング技術を実装できます。

照明と影: Three.js は、環境光、指向性光、点光源などを含むさまざまな光源タイプをサポートしており、シーン内の実際の照明効果をシミュレートできます。光源の位置、色、強度などのプロパティを設定することで、オブジェクトにリアルな影や反射を追加できます。

インタラクションと制御: Three.js には豊富なユーザーインタラクション機能があり、マウス、キーボード、タッチイベントを監視して、シーンとのユーザーインタラクションを実現できます。マウスのクリック、動き、ホイールイベントをキャプチャして、回転、ズーム、ドラッグなどの操作を実装できます。トラックコントローラーやデバイス方向コントローラーなどのコントローラーを追加して、ユーザーによるシーンの操作を簡素化することもできます。