これのテストを行った時に、ちょうど 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 とのコラボ
|
|
【Windows8 Metro(JS/C#)の最新記事】
- Win8(JS Metro)の『分割･･･』テンプレートにアプリバーを追加して、新しいページを定義する
- Win8(JS Metro)の『分割･･･』テンプレートを使って RSS を収集するサンプル
- Win8(JS Metro)の『分割･･･』テンプレートから追加のページを定義する方法
- 『分割アプリケーション』/ Win8(Metro)テンプレートのテンプレートたる意味
- Windows8(JavaScript Metro Style) 関連リンク
- Windows8 で SkyDrive にアップロードするサンプル
- Windows8 Metro(JS) で LiveSDK を使って signin してテキスト表示するだけのサンプルコードの実行
- Windows8 Metro(JS) でのカメラの利用は簡単ですが、まだ製品版では無いせいか他の処理と同時に動かすと、問題もあるようです
- Windows8 Metro(JS)の画面切り替えが解る、jQuery とのコラボ
- Google ドキュメントを使ってソースコード配布と解説
- 余計なものを全て排除した Win8 Metro(JS) アプリの画面遷移
- querySelectorAll(結果はNodeList) と forEach( Array のメソッド ) の動作確認コード
- Win8 Metro(JS) のクラス定義用クラスでの記述仕様で、getter が存在します
- Win8 Metro で画面の表示変更は、画面部分(?)オブジェクトの入れ替えを自分で行います
- Win8 Metro(JS) : 印刷処理
- Win8 Metro(JS) : WinJS.xhr の内容(XMLHttpRequest)
