Visual Studio 2013 Professional の 90 日間の無償評価版をダウンロードしてインストールし、動作確認しました。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>App1</title>
<!-- WinJS 参照 -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<!-- App1 参照 -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/js/three.min65.js"></script>
<script src="/js/OrbitControls.js"></script>
<script src="/js/user_three.js"></script>
<style>
#three_area {
margin: 20px 0px 0px 190px;
width: 850px;
height: 400px;
border: solid #ffffff 1px;
}
#title_area {
margin: 150px 0px 0px 190px;
width: 820px;
height: 60px;
border: solid #ffffff 1px;
font-size: 25px;
padding: 15px;
}
</style>
</head>
<body>
<div id="title_area">Windows 8.1 + Visual Studio 2013 + WebGL + Three.js v65</div>
<div id="three_area"></div>
<script>
var cameraCube, sceneCube;
var w = 850;
var h = 400;
// カメラ作成
USER.camera = new THREE.PerspectiveCamera(70, w / h, 1, 10000);
USER.camera.position.set(0, 0, 1);
USER.camera2 = new THREE.PerspectiveCamera(50, w / h, 1, 500);
USER.camera2.position.z = 0;
// シーン作成
USER.scene = new THREE.Scene();
USER.scene2 = new THREE.Scene();
// テクスチャの準備
var path = "/images/";
var format = '.jpg';
var urls = [
path + 'px' + format, path + 'nx' + format,
path + 'py' + format, path + 'ny' + format,
path + 'pz' + format, path + 'nz' + format
];
// テクスチャの実装
mesh = USER.meshPanorama(urls);
USER.scene2.add(mesh);
// レンダラー作成
USER.renderer = new THREE.WebGLRenderer();
USER.renderer.setSize(w, h);
// 表示エリア設定
document.getElementById("three_area").appendChild(USER.renderer.domElement);
// コントロール作成
USER.orbit();
USER.controls.autoRotate = true;
USER.controls.autoRotateSpeed = 0.5; //default 2.0
// アニメーション開始
USER.animate();
// オーバーライド
USER.animate = function () {
requestAnimationFrame(USER.animate);
USER.camera2.rotation.copy(USER.camera.rotation);
USER.camera2.position.copy(USER.camera.position);
USER.controls.update();
USER.renderer.render(USER.scene2, USER.camera2);
}
</script>
</body>
</html>
▼ このコードは、実際 WEB 上で動作しているものです。Three.js : WebGL限定の Cube テクスチャによる『パノラマ背景』 この時の Three.js は v57 で、Windows8.1 で動作確認するにあたり、最新版は v65 でした。しかし、v65 のほうでは OrbitControls.js の内部処理がかなり変更された結果、Windows8.1 上では画面がちらつくので元のコードに近い状態に変更して動作させました。( 373 行目の scope.update(); をコメントにしました ) 以下は、メインコードを簡潔にする為のユーザコードです( user_three.js )
USER = {};
USER.camera = null;
USER.scene = null;
USER.camera2 = null;
USER.scene2 = null;
USER.renderer = null;
USER.controls = null;
USER.animate = function () {
requestAnimationFrame( USER.animate );
USER.controls.update();
}
USER.render = function() {
USER.renderer.render( USER.scene, USER.camera );
}
USER.orbit = function() {
USER.controls = new THREE.OrbitControls( USER.camera );
USER.controls.addEventListener( 'change', USER.render );
}
USER.meshPanorama = function(urls) {
var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
reflectionCube.format = THREE.RGBFormat;
// Skybox
var shader = THREE.ShaderLib[ "cube" ];
shader.uniforms[ "tCube" ].value = reflectionCube;
var material = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.BackSide
} );
return new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), material );
}
|
|
【Win8 ストアアプリの最新記事】
- C# : HttpClient で Post と Get する汎用 static クラス
- WinJS ストア : Three.js を組み込んで、『画像を飛ばす』テンプレート( Bird.js を利用 )
- WinJS ストア : 『背景画像をチェンジする２画面アプリ』のテンプレート
- VS2012ストア(C#) : WebView テンプレート
- VS2012(C#)ストア : ListView Twitter 検索テンプレート
- イラストを背景にして２ページの画面遷移を解りやすくした Windows Store テンプレート
- Twitter API の自分のアプリのトークンを使って投稿するだけの class VS2012_Twitter
- Win8 ストア(C#) / PDF viewer sample (Windows 8.1)
- ストアアプリの TextBox のスクロールバー
- Win8 ストアアプリの、メモリ上にページを残す画面遷移と、前画面のコントロールの参照
- Win8 ストアアプリで、『選択肢を応答するダイアログ』を簡単に使うための MessageBox クラス
- Win8 ストアから Post 投稿
- Win8ストア XAML の AppBarButtonStyle のContent に指定する 16進数 Unicode の取得
- Win8 ストア : UrlEncode と UrlDecode
- Win8 ストア : HttpClient + XDocument で RSS の取得
- Win8 ストア : リストボックス テンプレート
- Win8 ストア : ファイルアクセス テンプレート
- Win8 ストア : ストアブランク テンプレート
- AppBar テンプレート / Win8 ストアアプリ(C#)
- Windows ストアアプリの AppBar を作成してテストする
