TypeScriptでthree.js

今日デブサミ2013 Day0に行ったんですが、デバイスとかセンサーで得た情報を視覚化するのって大事だなと思ったりしたんですが、自分にはその手段がないということに気付きました。3Dグラフィックとか現実をシミュレートするような基礎的な知識が何もない。

よく使われてるのは

Unityでした。ちょっとSDK入れてとかやるのがだるかったので…。

three.jsを試してみた

最近TypeScriptを触ってるのもあるのでWebGLをラップしてくれるデファクトスタンダードっぽいライブラリのthree.jsを試してみました。NuGetで探してみたところ、型定義はあるみたいなので。three.js本体はNuGetになかったので本家サイトからDLしました。

• three.js - JavaScript 3D library
• NuGet Gallery | threejs.TypeScript.DefinitelyTyped 0.1.9

そして、本家のドキュメントのIntroductionをTypeScriptで写経。

/// <reference path="scripts/typings/threejs/three.d.ts" />

window.onload = () => {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var geometry = new THREE.CubeGeometry(1, 1, 1);
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var cube = new THREE.Mesh(geometry, material);

    scene.add(cube);

    camera.position.z = 3;

    // ここがちょっと違う・・・！！
    var render = () => {
        requestAnimationFrame(render);

        cube.rotation.x += 0.1;
        cube.rotation.y += 0.1;

        renderer.render(scene, camera);
    };
    render();
};

なんというか、完璧にインテリセンスが効いて気持ちいい！！型定義がきちんとしてるっていうのは大事ですね…。個々のパラメータにどんな意味があるのかはよくわからないので要勉強・・・。

特に面白くないのですが実行結果

3Dの緑色のキューブがぐるぐる回ってる・・・！

まとめ

地味に人生初の3Dプログラミングが動いたのでうれしくて写経しただけですがBlogってしまいました。こういうはじめてのことって動くと楽しくてテンション上がりますよね！