はじめに

今回紹介する「Three.js」は、私が大学時代にJavaScriptにはまるきっかけとなったJavaScriptのライブラリです。
この記事少しでもJavaScritの可能性を感じていただけたら嬉しいです。

Three.jsとは

ウェブブラウザ上で3DCGを描画するためのJavaScriptのライブラリです。
WebGLをもとに開発されており、簡単なコードで3DCGを描画できるのが特徴です。

以下のリポジトリからダウンロードすることが出来ます。
https://github.com/mrdoob/three.js

使い方

Three.jsは任意のhtmlに読み込むだけで使用可能!

<script src="js/three.min.js"></script>

デモ

今回は以下のような立方体を描画します。

使用するコードは以下です。

    init();
    animate();

    function init() {
        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        geometry = new THREE.BoxGeometry( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );
    }

    function animate() {
        requestAnimationFrame( animate );
        render();
    }

    function render() {
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );
    }

以下の部分で、3Dモデルを描画する場所を定義しています。

scene = new THREE.Scene();

以下の部分で、3Dモデルを見る視点を定義しています。

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;

以下の部分で、描画する3Dモデルを定義しています。

geometry = new THREE.BoxGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

以下で、ブラウザのどこに描画するのかを定義しています。

renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

以下で、描画処理を実行しています。
ここでは、立方体を回転させる設定も行っています。

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );

イメージとしては、以下のようなものとなる。

最後に

　今回紹介したものは、立方体を描画するコードだったが、この他にもいろいろできることが多くある。
例えば、描画した図形にテクスチャを貼ることや、図形を見る視点を動的に変更することから、MMDモデルの描画まで可能です。ブラウザを2分割して、左右に同じ3Dモデルを表示することで簡易的なVRも実現することができる。
やり方次第でいろいろと可能性が出てくる面白いライブラリという印象です。

詳しくは、オライリー本を読んでみよう！
https://www.amazon.co.jp/%E5%88%9D%E3%82%81%E3%81%A6%E3%81%AEThree-js-%E7%AC%AC2%E7%89%88-%E2%80%95WebGL%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AEJavaScript-3D%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA-Dirksen/dp/4873117704/ref=sr_1_1?crid=SAYFHPE4EA0F&keywords=three.js&qid=1702487441&sprefix=three.js%2Caps%2C419&sr=8-1