- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2017-10-26T20:41:35+09:00","default:kyo-in","kyo-in")
#author("2018-04-03T16:11:09+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
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でそのフォルダを開きます.
まず,好みの場所に作業(プロジェクト)フォルダを作り,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%%
%%↓%%
%%>TypeScript - tsconfig.json%%
#ref(./command.png,50%);
>Tasks:Configure Default Build Task
↓
>tsc:ビルド-tsconfig.json
を選択.
を選択(文字を入力すると補完されて表示されます).
選択するとtasks.jsonが自動生成されるのでそのままでOK.
VSCode上の端末ウインドウを開き,TypeScriptビルドのためのモジュールをインストール.
VSCode上の統合ターミナルを開き,
#ref(./terminal2.png,50%);
ターミナルに以下を打ち込み,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.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が生成されれば成功です.
**デバッグ設定 [#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%);
-http://www.mlab.im.dendai.ac.jp/~tomoriya/CGMP/sample01/
#ref(link.png);
#ref(break.png);
VSCode上でブレイクポイントの利用も可能です.