かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

TypeScriptでthree.js

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

よく使われてるのは

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

three.jsを試してみた

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

そして、本家のドキュメントの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の緑色のキューブがぐるぐる回ってる・・・!

f:id:okazuki:20140212231606p:plain

まとめ

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