かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

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ってしまいました。こういうはじめてのことって動くと楽しくてテンション上がりますよね!