概要

タイトル通り,Visual Studio Codeでthree.jsプログラムをTypeScriptで記述し,また実行+デバッグをChromeで行う手順を示します.

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

準備

当然Visual Studio Code(以下VSCode)は必須.

パッケージマネージャー,npmを使用してTypeScriptのビルド環境を作るので,node.jsをインストールする必要があります.

Chromeも必須.

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

chrome.png

TypeScript環境のセットアップ

以下を参考に.

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

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

openfolder.png

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

newfile.png

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

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

とします.

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

[表示]⇒[コマンド パレット]

cp.png

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

command.png

>Tasks:Configure Default Build Task

>tsc:ビルド-tsconfig.json

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

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

VSCode上の統合ターミナルを開き,

terminal2.png

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

>npm install -g typescript

Windows以外は管理者権限で,

>sudo npm install -g typescript

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

terminal.png

three.js周りのセットアップ

ひとまず動くプログラム(+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"/>

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.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が生成されれば成功です.

デバッグ設定

VSCodeのデバッグを選択し,歯車をクリックしてChromeを選択します.

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}"
       }
   ]
}

実行,デバッグ

あとは,構成から「Launch index.html」を選択し,実行してみましょう.

debug2.png
break.png

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

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

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


添付ファイル: filecp.png 764件 [詳細] filedebug2.png 696件 [詳細] fileterminal2.png 751件 [詳細] filecommand.png 724件 [詳細] filenewfile.png 784件 [詳細] fileopenfolder.png 724件 [詳細] filelink.png 670件 [詳細] fileterminal.png 810件 [詳細] filechrome.png 825件 [詳細] filebreak.png 756件 [詳細] filedebug.png 796件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2018-04-17 (火) 16:20:30