- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2017-05-25T19:32:58+09:00","default:kyo-in","kyo-in")
#author("2017-05-30T16:45:51+09:00","default:kyo-in","kyo-in")
**概要 [#n2829d24]
タイトル通り,Visual Studio Codeでthree.jsプログラムをTypeScriptで記述し,また実行+デバッグをChromeで行う手順を示します.
ざっくりと書くのでPC操作に慣れた人向けです.
全てのソフトがクロスプラットフォームですので,OSを問わない(はず)です.
**準備 [#n469e705]
当然Visual Studio Code(以下VSCode)は必須.
-https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx
Chromeも必須.
-https://www.google.co.jp/chrome/browser/desktop/
VSCode上から拡張機能で,「Debugger for Chrome」をインストールしておきます.
-https://github.com/Microsoft/vscode-chrome-debug
#ref(chrome.png);
パッケージマネージャー,npmを使用してTypeScriptのビルド環境を作るので,node.jsをインストールする必要があります.
-https://nodejs.org/ja/
**TypeScript環境のセットアップ [#p15522d2]
以下を参考に.
https://code.visualstudio.com/docs/languages/typescript
作業(プロジェクト)フォルダを作り,VSCodeでそのフォルダを開きます.
まずはTypeScriptの設定ファイル,tsconfig.jsonを作成し,内容は以下にします.上記ページのサンプルから"target"を「es2017」変更していることに注意します.''「es5」のままでは後でコンパイルエラーが出ます.''
{
"compilerOptions": {
"target":"es2017",
"module": "commonjs",
"sourceMap": true
}
}
とします.
VSCodeのTask Runnerという機能を使ってTypeScriptファイルのビルド設定を行います.
Ctrl+Shift+P(Windowsの場合)でコマンドパレットを開き,
>Configure Task Runner
↓
>TypeScript - tsconfig.json
を選択.
選択すると以下の内容の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上の端末ウインドウを開き,TypeScriptビルドのためのモジュールをインストール.
>npm install -g typescript
Windows以外は管理者権限で,
>sudo npm install -g typescript
じゃないとたぶんエラー.
#ref(terminal.png);
**three.js周りのセットアップ [#g93b0da6]
ひとまず動くプログラム(+html)を用意する.
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.body.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"
},
**実行,デバッグ [#a3364ee0]
あとは,構成から「Launch index.html」を選択し,実行してみましょう.
#ref(break.png);
VSCode上でブレイクポイントの利用も可能です.