概要
なんだか面白そうだと思いBabylonJSのリサーチを始めた。
手始めに、使い慣れたVisualStudioにてBabylonJS+TypeScriptの環境を設定したいと考えた。
しかし公式サイトの方法は情報が古いためか成功せず。しかしながら、情報は古いながらもそこで得た知見及び直感にて、ようやく成功にこぎつけた。
そのメモを残す。
方法
前提:Visual Studio Community 2015
1.新規プロジェクト "ASP.NET Webアプリケーション(VisualC#)"
テンプレート Emptyを選択。
2.ソリューションエクスプローラの"参照"を右クリック
"NuGetパッケージの管理"を選択
3.BabylonJSパッケージを選択しインストール
インストール中の"TypeScriptをサポート・・"ダイアログは"はい"を選択
4. ソリューションエクスプローラにて新規の"index.html"をダミーとして作成
※次のステップで無関係なエラーを出さないため
5.ビルド&デバッグを行う
ブラウザが立ち上がりエラーを表示
6.エラーの対応
web.config (ソリューションエクスプローラのルート直下)をエラーの指示に従い修正
多重構成定義のエラーが出る。指摘部分をコメントアウト
合計3ヵ所修正
7.sandbox.tsの作成
新規フォルダ typescriptの直下にsandbox.tsを作成
公式サイトのが動作しなかっため、修正。
module Sandbox {
export class MainClass {
public engine: BABYLON.Engine;
public scene: BABYLON.Scene;
public camera: BABYLON.TargetCamera;
constructor(canvas: HTMLCanvasElement) {
this.engine = new BABYLON.Engine(canvas, true);
this.scene = new BABYLON.Scene(this.engine);
this.scene.clearColor = new BABYLON.Color3(56 / 256, 87 / 256, 145 / 256);
this.camera = new BABYLON.ArcRotateCamera("camera1", 0, 0.8, 100, BABYLON.Vector3.Zero(), this.scene);
this.camera.attachControl(canvas);
var mesh = BABYLON.Mesh.CreateBox("box01", 50, this.scene);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), this.scene);
}
public runRenderLoop(): void {
this.engine.runRenderLoop(() => {
this.scene.render();
});
}
}
}
8.index.htmlの編集
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="scripts/babylon.max.js" type="text/javascript"></script>
<script src="typescript/sandbox.js"></script>
</head>
<body>
<div>
<canvas width="600" height="600" id="renderCanvas"></canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById("renderCanvas");
function runBasicScene() {
mainScene = new Sandbox.MainClass(canvas);
mainScene.runRenderLoop();
}
runBasicScene();
</script>
</body>
</html>
9.実行
参考
http://www.babylonjs.com/ BabylonJS Official
http://doc.babylonjs.com/generals/setup_visualStudio Setup VisualStudio
追記
デバッグについて
Edgeのデバッガーにて可能
VS上からのデバッグ方法は不明
以上