2011年4月19日火曜日

Hello Three.js

こんばんは、にゃまだんです。
社会人になり、上京してきました(∩´∀`)∩ワーイ

学生時代と違ってなかなか時間がとれませんが、
少しずつ落ち着いてきたので久しぶりにWebGLでもいじってみようかと思います。


以前から気になってたWebGLライブラリのthree.jsを触ってみようかと思います。
Canvas, SVG, WebGLに対応しているらしいです。
Three.jsはここからダウンロードします。

それではHello World(ReadmeのUsageの部分を少し編集しただけデス)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello Three.js</title>
        <script src="js/Three.js"></script>
        <script>
            addEventListener("load", function(){
                var camera, scene, renderer, geometry, material, mesh;

                //カメラー!
                camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.z = 500;

                //シーンー!
                scene = new THREE.Scene();

                //ジオメトリー!
                geometry = new THREE.Torus(200, 40, 32, 16);
                material = new THREE.MeshBasicMaterial( { color: 0xC0C0C0 } );

                //ジオメトリ+マテリアル=メッシュ!
                mesh = new THREE.Mesh( geometry, material );

                //メッシュ→シーン!
                scene.addObject( mesh );

                //レンダラー!
                renderer = new THREE.CanvasRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );

                //DOM→BODY
                document.body.appendChild( renderer.domElement );

                //アニメーション!
                setInterval( function () {
                    //メッシュを回転
                    mesh.rotation.x += 0.01;
                    mesh.rotation.y += 0.02;

                    //レンダリング
                    renderer.render( scene, camera );
                }, 16);
            }, false);
        </script>
    </head>
    <body>
    </body>
</html>
お?シンプルでわかりやすいかんじ?

実行画面はこんな感じ、もっと調べていこうかと思います。

ほかにはGLGEなんかが気になっているのですが、
私の環境ではデモがうまく動かなかったりでちょっと見送ってる感じデス。

0 件のコメント:

コメントを投稿