#author("2017-05-25T19:32:58+09:00","default:kyo-in","kyo-in")
#author("2018-04-17T16:20:30+09:00","default:kyo-in","kyo-in")
**概要 [#n2829d24]
タイトル通り,Visual Studio Codeでthree.jsプログラムをTypeScriptで記述し,また実行+デバッグをChromeで行う手順を示します.

ざっくりと書くのでPC操作に慣れた人向けです.
全てのソフトがマルチプラットフォームですので,OSを問わない(はず)です.

全てのソフトがクロスプラットフォームですので,OSを問わない(はず)です.

**準備 [#n469e705]
当然Visual Studio Code(以下VSCode)は必須.

-https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx

VSCode上から拡張機能で,「Debugger for Chrome」をインストールしておきます.
パッケージマネージャー,npmを使用してTypeScriptのビルド環境を作るので,node.jsをインストールする必要があります.

-https://github.com/Microsoft/vscode-chrome-debug
-https://nodejs.org/ja/

#ref(chrome.png);

Chromeも必須.

パッケージマネージャー,npmを使用してTypeScriptのビルド環境を作るので,node.jsをインストールする必要があります.
-https://www.google.co.jp/chrome/browser/desktop/

-https://nodejs.org/ja/
VSCode上から拡張機能で,「Debugger for Chrome」をインストールしておきます.

-https://github.com/Microsoft/vscode-chrome-debug

#ref(chrome.png);

**TypeScript環境のセットアップ [#p15522d2]
以下を参考に.

https://code.visualstudio.com/docs/languages/typescript

作業(プロジェクト)フォルダを作り,VSCodeでそのフォルダを開きます.
まず,好みの場所に作業(プロジェクト)フォルダを作り,VSCodeでそのフォルダを開きます.

まずはTypeScriptの設定ファイル,tsconfig.jsonを作成し,内容は以下にします.上記ページのサンプルから"target"を「es2017」変更していることに注意します.''「es5」のままでは後でコンパイルエラーが出ます.''
#ref(./openfolder.png,50%);

次にTypeScriptの設定ファイル,tsconfig.jsonを作成します.新しいファイルは,ファイル一覧の右上のアイコンから作成可能です.

#ref(./newfile.png,50%);

内容は以下にします.上記ページのサンプルから"target"を「es2017」変更していることに注意します.''「es5」のままでは後でコンパイルエラーが出ます.''

 {
     "compilerOptions": {
         "target":"es2017",
         "module": "commonjs",
         "sourceMap": true
     }
 }

とします.

VSCodeのTask Runnerという機能を使ってTypeScriptファイルのビルド設定を行います.
次に,VSCodeのTask Runnerという機能を使ってTypeScriptファイルのビルド設定を行います.

Ctrl+Shift+P(Windowsの場合)でコマンドパレットを開き,
[表示]⇒[コマンド パレット]

>Configure Task Runner
#ref(./cp.png,50%);

もしくは Ctrl+Shift+P(Windowsの場合)でコマンドパレットを開き,

#ref(./command.png,50%);
 
>Tasks:Configure Default Build Task
>TypeScript - tsconfig.json
>tsc:ビルド-tsconfig.json

を選択.
を選択(文字を入力すると補完されて表示されます).

選択すると以下の内容のtasks.jsonが自動生成されるのでそのままでOK.
選択するとtasks.jsonが自動生成されるのでそのままでOK.

 {
     // See https://go.microsoft.com/fwlink/?LinkId=733558
     // for the documentation about the tasks.json format
     "version": "0.1.0",
     "command": "tsc",
     "isShellCommand": true,
     "args": ["-p", "."],
     "showOutput": "silent",
     "problemMatcher": "$tsc"
 }
VSCode上の統合ターミナルを開き,

VSCode上の端末ウインドウを開き,TypeScriptビルドのためのモジュールをインストール.
#ref(./terminal2.png,50%);

ターミナルに以下を打ち込み,TypeScriptビルドのためのモジュールをインストール.

 >npm install -g typescript

Windows以外は管理者権限で,

 >sudo npm install -g typescript

じゃないとたぶんエラー.

#ref(terminal.png);

**three.js周りのセットアップ [#g93b0da6]
ひとまず動くプログラム(+html)を用意する.
ひとまず動くプログラム(+html)を用意する.VSCode上で以下の名前でファイルを新規作成し,内容を以下にする.

index.html:
 <!DOCTYPE html>
 <html lang="ja">
 <head>
     <meta charset="utf-8" />
     <title>TypeScript HTML App</title>
     <script src="./node_modules/three/build/three.js"></script>
     <script src="app.js"></script>
 </head>
 <body>
     <div id="viewport"></div>
     <h1>TypeScript HTML</h1>
 </body>
 </html>

app.ts:
 ///<reference path="./node_modules\@types\three\index.d.ts"/>
 ///<reference path="./node_modules/@types/three/index.d.ts"/>
 
 class ThreeJSTest {
     private scene: THREE.Scene;
     private camera: THREE.Camera;
     private renderer: THREE.WebGLRenderer;
     private geometry: THREE.Geometry;
     private material: THREE.Material;
     private cube: THREE.Mesh;
     private light: THREE.Light;
     private screenWidth: number = 640;
     private screenHeight: number = 480;
 
     constructor() {
         this.createRenderer();
         this.createScene();
     } 
 
     private createRenderer() {
         this.renderer = new THREE.WebGLRenderer();
         this.renderer.setSize(this.screenWidth, this.screenHeight);
         this.renderer.setClearColor(new THREE.Color(0x495ed));
         document.body.appendChild(this.renderer.domElement);
         document.getElementById("viewport").appendChild(this.renderer.domElement);
     }  
 
     private createScene() {
         this.scene = new THREE.Scene();
         this.geometry = new THREE.BoxGeometry(1, 1, 1);
         this.material = new THREE.MeshLambertMaterial({ color: 0x55ff00 });
         this.cube = new THREE.Mesh(this.geometry, this.material);
         this.scene.add(this.cube);
         this.camera = new THREE.PerspectiveCamera(75, this.screenWidth /   
  this.screenHeight, 0.1, 1000);
         this.camera.position.x = 3;
         this.camera.position.y = 3;
         this.camera.position.z = 3;
         this.camera.lookAt(new THREE.Vector3(0,0,0));
         this.light = new THREE.DirectionalLight(0xffffff);
         var lvec = new THREE.Vector3(1, 1, 1).normalize();
         this.light.position.set(lvec.x, lvec.y, lvec.z);
         this.scene.add(this.light);
     } 
 
     public render() {
         this.cube.rotation.x += 0.02;
         this.cube.rotation.y += 0.02;
 
         this.renderer.render(this.scene, this.camera);
 
         requestAnimationFrame(this.render.bind(this));
     }
 
 }
 
 window.onload = () => {
     var threeJSTest = new ThreeJSTest();
     threeJSTest.render(); 
 };

必要なモジュールをVSCodeのターミナルからインストール.

three.js:
 >npm install three

three.jsの型定義ファイル:
 > npm install @types/three

ここでapp.tsを開きShift+Ctrl+Bでビルドし,エラーがでず,app.jsをapp.js.mapが生成されれば成功です.
ここでapp.tsを開きShift+Ctrl+Bでビルドし,エラーがでず,app.jsとapp.js.mapが生成されれば成功です.

**デバッグ設定 [#l4030b77]
VSCodeのデバッグを選択し,歯車をクリックしてChromeを選択します.

#ref(debug.png);

デバッグ用の設定ファイルが生成されますが,ローカルファイルのデバッグ設定がないので,launch.jsonに以下を追記します.

        {
            "name": "Launch index.html",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceRoot}/index.html"
        },

以上を追記したlaunch.json全体は例えば以下のようになります.

 {
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch index.html",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceRoot}/index.html"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "localhost に対して Chrome を起動",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
 }

**実行,デバッグ [#a3364ee0]
あとは,構成から「Launch index.html」を選択し,実行してみましょう.
#ref(./debug2.png,50%);

#ref(break.png);

VSCode上でブレイクポイントの利用も可能です.

-http://www.mlab.im.dendai.ac.jp/~tomoriya/CGMP/sample01/
#ref(link.png);

↑スマートフォンで読み取ってみよう.

Javascriptベースなので,ブラウザが対応していれば,jsファイル一式とhtmlファイルをWebスペースに配置しアクセスすることでiPhone(iOS),Android端末でも実行,表示できます.


トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS