概要

なんだか面白そうだと思いBabylonJSのリサーチを始めた。
手始めに、使い慣れたVisualStudioにてBabylonJS+TypeScriptの環境を設定したいと考えた。
しかし公式サイトの方法は情報が古いためか成功せず。しかしながら、情報は古いながらもそこで得た知見及び直感にて、ようやく成功にこぎつけた。
そのメモを残す。

方法

前提：Visual Studio Community 2015

１．新規プロジェクト "ASP.NET Webアプリケーション(VisualC#)"
　　テンプレート Emptyを選択。

２．ソリューションエクスプローラの"参照"を右クリック
　　"NuGetパッケージの管理"を選択

３．BabylonJSパッケージを選択しインストール
　　インストール中の"TypeScriptをサポート・・"ダイアログは"はい"を選択

４. ソリューションエクスプローラにて新規の"index.html"をダミーとして作成
　　※次のステップで無関係なエラーを出さないため

５．ビルド＆デバッグを行う
　　ブラウザが立ち上がりエラーを表示

６．エラーの対応
　　web.config (ソリューションエクスプローラのルート直下)をエラーの指示に従い修正
　　多重構成定義のエラーが出る。指摘部分をコメントアウト
　　合計３ヵ所修正

７．sandbox.tsの作成

　　新規フォルダ typescriptの直下にsandbox.tsを作成

　　公式サイトのが動作しなかっため、修正。

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();
            });
        }
    }
}

８．index.htmlの編集

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>

９．実行

参考

http://www.babylonjs.com/ BabylonJS Official
http://doc.babylonjs.com/generals/setup_visualStudio Setup VisualStudio

追記

デバッグについて

Edgeのデバッガーにて可能
VS上からのデバッグ方法は不明

以上

BabylonJS VisualStudio 環境設定 メモ

概要

方法

参考

追記

デバッグについて

BabylonJS VisualStudio 環境設定メモ