RSS

three.jsを初心者らしく触ってみる

03 4月

WebGLを触ってみたくて色々調べたところ、three.jsで比較的簡単に実装できるらしいので
初心者らしくとりあえず触ってみた。

three.jsは以下からダウンロード
http://threejs.org/

簡単な立方体表示とマウスでカメラ移動を実装してみる。

three.min.jsとTrackballControls.jsをthree.jsの中から持ってきて参照する

        <script src="./lib/three.min.js"></script>
        <script src="./js/controls/TrackballControls.js"></script>

htmlのscriptタグの中身。

        var CUBES_COUNT = 3;

        var main = function () {

            var cubes = {};

            // ステージ作成 ---------------------
            var scene = new THREE.Scene();

            // 背景代わりに
            var geometry = new THREE.BoxGeometry(600, 400, 1);
            var m = new THREE.MeshPhongMaterial({color: '#8f88df'});
            cubes[0] = new THREE.Mesh(geometry, m);
            cubes[0].position.set(0, 0, -100);
            // シーンに追加
            scene.add(cubes[0]);

            // カメラ配置 ---------------------
            var camera = new THREE.PerspectiveCamera(75, 600 / 400, 1, 1000);
            camera.position.set(0, 0, 40);

            // カメラをTrackballControlsに設定
            var controls = new THREE.TrackballControls( camera );

            // Render ---------------------
            if (window.WebGLRenderingContext) {
              renderer = new THREE.WebGLRenderer();
            } else {
              renderer = new THREE.CanvasRenderer();
            }
            renderer.setSize(600, 400); // Canvasのサイズ
            document.body.appendChild(renderer.domElement);

            // 光 ---------------------
            var light = new THREE.DirectionalLight('#ffffff', 2);
            light.position.set(0, 10, 10);
            // シーンに追加
            scene.add(light); 

            // 箱配置 ---------------------
            geometry = new THREE.BoxGeometry(15, 10, 10);

            // 青箱「あーおー」
            var material2 = new THREE.MeshPhongMaterial({color: '#0000DF'});
            cubes[1] = new THREE.Mesh(geometry, material2);
            cubes[1] .position.set(0, 10, 0);
            // シーンに追加
            scene.add(cubes[1] );

            // 赤箱「あーかー」
            var material = new THREE.MeshPhongMaterial({color: '#FF0000'});
            cubes[2] = new THREE.Mesh(geometry, material);
            cubes[2].position.set(0, -10, 0);
            // シーンに追加
            scene.add(cubes[2]);

            (function render() {
                // 毎フレームrenderを呼んでね!!
                requestAnimationFrame(render);

                //回転方向を変えてるだけ
                var switchFlg = 1;
                for (var i=1;i<CUBES_COUNT;i++) {
                    cubes[i].rotation.x += (0.01*switchFlg);
                    cubes[i].rotation.y += (0.01*switchFlg); 
                    switchFlg *= -1;
                }
                
                // 描画
                renderer.render(scene, camera);
                controls.update();

            })();
        }

最後に

        // 画面読み込み終わったらmainを実行してー
        window.addEventListener( 'DOMContentLoaded', main, false );

こんな感じになりました。
three01

画面中央で青箱と赤箱がくるんくるんしてます。
マウスドラッグで視点もくるくる変わります。
マウススクロールで拡大縮小もついてます。
three02

すげえ。
ここまですごい簡単に出来たので感動。
three.jsすごい。

広告
 
コメントする

投稿者: : 2015/04/03 投稿先 JavaScript, WebGL

 

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

 
%d人のブロガーが「いいね」をつけました。