SQLの窓

2012年05月12日


Windows8 Metro(JS) で Three.js の 3D モデル表示(Canvas)を行う

これのテストを行った時に、ちょうど Three.js の仕様変更の時期に重なっていろいろありましたこのデータはテクスチャが1枚なので、対応方法としては一番簡単な方法を取っています。



Visual Studio 11 では、シュミレータでデバッグできるので上はその画像です。PC そのもので実行する方法がデフォルトですが、デスクトップとの切り替えが面倒なので、デスクトップ内のウインドウで Metro 表示そのものを見る事ができます。

※ このテストでは必要ありませんでしたが、右側のコントロールでウインドウを縦にする事ができます
※ ソースコードには、Three.js の内容に対してコメントで特に解説を入れてあります。
(function () {

    // Metro JS API
    var app = WinJS.Application;
    var nav = WinJS.Navigation;

    // Three.js 用の変数
    var container;
    var camera, scene, renderer;
    var mesh;
    var mouseX = 0, mouseY = 0;
    var material;
    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;

    // アプリケーションの初期処理
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize 
                // your application here.

                // 初期画面の表示処理の呼び出し
                nav.navigate("/html/homePage.html");
                Debug.writeln("初期処理");

            } else {
                // TODO: This application has been reactivated from suspension. 
                // Restore application state here.
            }
            WinJS.UI.processAll();
        }
    };

    // navigate メソッドの中身の実装
    WinJS.Navigation.addEventListener("navigated", function (ev) {
        Debug.writeln("navigated");
        Debug.writeln(ev.detail.location);
        var target = document.querySelector("#contentHost");
        WinJS.Utilities.empty(target);
        WinJS.UI.Fragments.render(ev.detail.location, target).then(function () {

            // 『戻るボタン』の実装
            var backButton = document.querySelector(".win-backbutton");
            if (backButton) {
                backButton.addEventListener('click', function () {
                    WinJS.Navigation.back();
                }, false);
                if (WinJS.Navigation.canGoBack) {
                    backButton.removeAttribute('disabled');
                }
                else {
                    backButton.setAttribute('disabled', 'true');
                }
            }

            // 初期画面が表示された場合、先頭のボタンに『第二画面への移動』を登録
            if (ev.detail.location == "/html/homePage.html") {

                document.getElementById("playMenuItem")
                    .addEventListener("click", navigateGame, false
                    );

            }

            // 第二画面( jQuery のスライダーと 3D モデルの表示
            if (ev.detail.location == "/html/homePage_light.html") {

                $(function () {

                    // スライダー( .ready )
                    $("#slider-vertical").slider({
                        orientation: "vertical",
                        range: "min",
                        min: 0,
                        max: 1500,
                        value: 750,
                        slide: function (event, ui) {
                            $("#amount").val(ui.value);
                        }
                    });
                    $("#amount").val($("#slider-vertical").slider("value"));

                    // Three.js 処理の開始
                    init();
                    animate();

                });
            }

        });

    }, false);

    // ***********************************************************
    // 初期処理
    // ***********************************************************
    function init() {

        // Canvas が実装される対象 DIV
        container = document.getElementById('container_three');

        // シーンを作成
        scene = new THREE.Scene();
        // 表示オブジェクトの上下位置の調整
        scene.position.y = 150;

        // 通常カメラ( 遠近法 )
        camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.set(0, 200, 650);
        scene.add(camera);

        // 3D モデルのロード
        loader = new THREE.JSONLoader();
        loader.load('eyes.js', function (geometry) {

            var param = {
                map: THREE.ImageUtils.loadTexture('eyes.png'),
                overdraw: false
            };

            material = new THREE.MeshBasicMaterial(param);
            mesh = new THREE.Mesh(geometry, material);

            mesh.scale.x = 100;
            mesh.scale.y = 100;
            mesh.scale.z = 100;
            scene.add(mesh);

        });

        // position も scale も同じ Vector3 オブジェクトです

        // 表示機構
        renderer = new THREE.CanvasRenderer();
        renderer.setSize(700, 500);

        container.appendChild(renderer.domElement);

        document.addEventListener('mousemove', onDocumentMouseMove, false);

    }

    // ***********************************************************
    // マウス位置( カメラ位置として利用 )
    // ***********************************************************
    function onDocumentMouseMove(event) {

        mouseX = (event.clientX - windowHalfX);
        mouseY = (event.clientY - windowHalfY);

    }

    // ***********************************************************
    // 一定期間の実行の繰り返し
    // ***********************************************************
    function animate() {

        requestAnimationFrame(animate);
        render();

    }

    // ***********************************************************
    // 移動データの設定と描画
    // ***********************************************************
    function render() {

        camera.position.x += (mouseX - camera.position.x) * 0.05 + 15;
        camera.position.y += (-mouseY - camera.position.y) * 0.05;
        camera.lookAt(scene.position);

        renderer.render(scene, camera);

    }

    // メニューボタンに対応させる(予定の) function 定義
    function navigateHome() {
        Debug.writeln("メニュー");
        document.getElementById("appbar").winControl.hide();
    }
    function navigateGame() {
        Debug.writeln("ゲーム");
        document.getElementById("appbar").winControl.hide();
        nav.navigate("/html/homePage_light.html");
    }
    function navigateRules() {
        Debug.writeln("ルール");
        document.getElementById("appbar").winControl.hide();
    }
    function navigateScores() {
        Debug.writeln("スコア");
        document.getElementById("appbar").winControl.hide();
    }
    function navigateCredits() {
        Debug.writeln("クレジット");
        document.getElementById("appbar").winControl.hide();
    }


    app.oncheckpoint = function (eventObject) {
    };

    // アプリケーション開始
    app.start();

    // 全体で使える名前空間の定義と対応させる参照名
    WinJS.Namespace.define("R101", {
        navigateHome: navigateHome,
        navigateGame: navigateGame,
        navigateRules: navigateRules,
        navigateScores: navigateScores,
        navigateCredits: navigateCredits
    });

})();

関連する記事

Windows8 Metro(JS)の画面切り替えが解る、jQuery とのコラボ



posted by lightbox at 2012-05-12 01:16 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり