プロジェクト

全般

プロフィール

Wiki » JavaScript »

Three.js

Three.jsとは

JavaScriptでWebページ上に3Dコンテンツを簡単に描画できることを目的とした3Dグラフィックスライブラリです。
現バージョンでは、WebGLを基盤に使用しています。WebGLは低レベルの3D描画ライブラリで、その上にThree.jsが、シーン、光源、陰影、テクスチャ、3D計算などの要素を実装しています。

公式サイト

https://threejs.org

ドキュメント、サンプル、コミュニティサイト、コード（リポジトリ、ダウンロード）、リソースなどが記載されています。

Three.jsの構成

  • Renderer
    SceneとCameraをRendererに渡すと、Webページのcanvas上の2Dイメージに擬似3次元を描画します。
  • Scenegraph
    Sceneオブジェクトのツリー構造で、描画すべき3D空間の要素を定義します。Sceneオブジェクトは、Mesh, Light, Group, Object3Dなどがあります。
  • Camera

Mesh

GeometryとMaterialを持つ描画される物を定義します。

Geometry

頂点データの定義を表現します。球、立方体、犬、人物、などなど各種3D物体の形状を表現します。

Material

表面（Surface）の属性を定義します。Geometryを描画する時に使われます。色、輝度、テクスチャなどを表現します。

Texture

Light

初めての Three.js プログラミング

3Dグラフィックスにおける最初のプログラムとして、立方体を表示する Hello Cube を作成してみます。

公式サイトのマニュアル（Getting Started）から最初のプログラムを作成します。
https://threejs.org/docs/#manual/en/introduction/Creating-a-scene

Hello Cube

ファイル構造

HTMLファイル hello.html を用意し、そこに Three.jsライブラリを使用する JavaScript コードを記述します。

HTML構造の記述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello Cube</title>
        <style>
            body { margin:0; }
        </style>
    </head>
    <body>
        <script type="module">
            import * as THREE from 'https://unpkg.com/three/build/three.module.js';
            // ここに Three.jsプログラムを記載
        </script>
    </body>
</html>

ここでは、単一のHTMLファイルをローカルのWebブラウザで開いて実行するので、JavaScriptのThree.jsライブラリは既存のネットワーク（CDN）から取得しています。
importを使うため、script要素のtype属性にmoduleを定義しています。

Scene と Camera と Renderer

        <script type="module">
            import * as THREE from 'https://unpkg.com/three/build/three.module.js';

            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

            const renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
        </script>
  • scenegraphを保持するSceneオブジェクトを生成
  • Cameraの1つ、PerspectiveCamera（遠近法による写像をする3Dで一般的なカメラ）を生成
    • 第1引数にはFOV（Field Of View：視野角）を指定（単位は度）
    • 第2引数にはアスペクト比（縦横比）を指定
    • 第3、第4引数には、レンダリング対象とするオブジェクトの距離範囲をnear, farの順で指定。nearより近いオブジェクトとfarより遠いオブジェクトはレンダリングされません
  • レンダラーにWebGLを使うレンダラーを生成し、レンダラーが描画する領域の大きさを設定
  • WebブラウザのDOMにレンダラーが描画するcanvasを追加

Cubeの定義

            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);

            camera.position.z = 5;

続いて、上述のコードを追記します。
3Dオブジェクトは、頂点データを定義するgeometryと表面の属性を定義するmaterialを組み合わせたMeshとして定義します。

  • 直方体のgeometryであるBoxGeometryを生成、幅、高さ、奥行きを指定すると直方体の頂点と面を定義
  • 表面の描画に使用されるmaterialとして、MeshBasicMaterialを生成、ここでは色だけを指定
  • geometryとmaterialをあわせ持つMeshを定義
  • Meshをsceneに追加
  • カメラの位置（Z軸）を5に設定

ただし、まだここまでのコードではWebブラウザ上に何も表示されません。

animationFrame

            function animate() {
                requestAnimationFrame(animate);
                renderer.render(scene, camera);
            }
            animate();

Webブラウザに表示するために、アニメーションループを定義します。画面が更新されるたびにrendererがシーンを描画する処理を実行します。
アニメーションループを定義すると、描画されるようになります。

次に、画面が更新されるたびにcubeを回転させるコードを追加します。

             function animate() {
                 requestAnimationFrame(animate);
+                cube.rotation.x += 0.01;
+                cube.rotation.y += 0.01;
                 renderer.render(scene, camera);
             }

約1年前に更新