three.jsを使ってみる

みなさん、こんにちは。ishiBです。

今回はちょっと面白そうだったのでthree.jsというライブラリを利用してお手軽に３Dグラフィックスを作成したいと思います。
three.jsはHTML５のcanvasタグを使用するので、HTML5に対応しているブラウザで閲覧してください。

ここではここのサンプルに沿って以下の手順で処理を記述します。

１．カメラを用意
２．シーンを用意
３．ジオメトリーを作成
４．マテリアルを作成
５．メッシュを作成
６．メッシュをシーンに追加
７．レンダラーを用意
８．レンダラーをDOMに追加
９．アニメーション
１０．レンダリング

実際のコードは以下のようになります。

[javascript]
    var camera, scene, renderer,
    geometry, material, mesh;

    init();
    animate();

    function init() {

        // １．カメラを用意
        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        // ２．シーンを用意
        scene = new THREE.Scene();
        scene.add( camera );

        // ３．ジオメトリーを作成
        geometry = new THREE.CubeGeometry( 200, 200, 200 );

        // ４．マテリアルを作成
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

        // ５．メッシュを作成
        mesh = new THREE.Mesh( geometry, material );

        // ６．メッシュをシーンに追加
        scene.add( mesh );

        // ７．レンダラーを用意
        renderer = new THREE.CanvasRenderer();

        renderer.setSize( window.innerWidth, window.innerHeight );

        // ８．レンダラーをDOMに追加
        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 );

    }

[/javascript]

上記のコードを実装するとこんな感じになります。

３Dグラフィックサンプル

今回はこれを拡張して以下のものを作成しました。

主な拡張点は以下の３点です。
１．オブジェクトの数を３つ追加
２．オブジェクト種類の変更
３．マウスの移動に連動して一部動作するように変更

※ソースにコメントを追加してますので、実装方法はそちらを参照してください。

修正版３Dグラフィック

参考：three.jsのAPIリファレンスはこちら。

今回はhtml5 + javascriptで３Dグラフィックスを表示してみました。
今回は表示がメインですが、クリックイベントを拾うなどしてより動的な処理を追加していけば、
HTMLとjavascriptのみで高機能なGAMEなどを作成することも可能になります。

ではでは〜