VisualStudioCodeでTypeScript+three.js
をテンプレートにして作成
開始行:
**概要 [#n2829d24]
タイトル通り，Visual Studio Codeでthree.jsプログラムをTyp...
全てのソフトがマルチプラットフォームですので，OSを問わな...
**準備 [#n469e705]
当然Visual Studio Code（以下VSCode）は必須．
-https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx
パッケージマネージャー，npmを使用してTypeScriptのビルド環...
-https://nodejs.org/ja/
Chromeも必須．
-https://www.google.co.jp/chrome/browser/desktop/
VSCode上から拡張機能で，「Debugger for Chrome」をインスト...
-https://github.com/Microsoft/vscode-chrome-debug
#ref(chrome.png);
**TypeScript環境のセットアップ [#p15522d2]
以下を参考に．
https://code.visualstudio.com/docs/languages/typescript
まず，好みの場所に作業（プロジェクト）フォルダを作り，VSC...
#ref(./openfolder.png,50%);
次にTypeScriptの設定ファイル，tsconfig.jsonを作成します．...
#ref(./newfile.png,50%);
内容は以下にします．上記ページのサンプルから"target"を「e...
{
"compilerOptions": {
"target":"es2017",
"module": "commonjs",
"sourceMap": true
}
}
とします．
次に，VSCodeのTask Runnerという機能を使ってTypeScriptファ...
[表示]⇒[コマンド パレット]
#ref(./cp.png,50%);
もしくは Ctrl+Shift+P（Windowsの場合）でコマンドパレット...
#ref(./command.png,50%);
＞Tasks:Configure Default Build Task
↓
＞tsc:ビルド-tsconfig.json
を選択（文字を入力すると補完されて表示されます）．
選択するとtasks.jsonが自動生成されるのでそのままでOK．
VSCode上の統合ターミナルを開き，
#ref(./terminal2.png,50%);
ターミナルに以下を打ち込み，TypeScriptビルドのためのモジ...
>npm install -g typescript
Windows以外は管理者権限で，
>sudo npm install -g typescript
じゃないとたぶんエラー．
#ref(terminal.png);
**three.js周りのセットアップ [#g93b0da6]
ひとまず動くプログラム(+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 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....
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.scr...
this.renderer.setClearColor(new THREE.Color(0x49...
document.getElementById("viewport").appendChild(...
}
private createScene() {
this.scene = new THREE.Scene();
this.geometry = new THREE.BoxGeometry(1, 1, 1);
this.material = new THREE.MeshLambertMaterial({ ...
this.cube = new THREE.Mesh(this.geometry, this.m...
this.scene.add(this.cube);
this.camera = new THREE.PerspectiveCamera(75, th...
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でビルドし，エラーがでず，a...
**デバッグ設定 [#l4030b77]
VSCodeのデバッグを選択し，歯車をクリックしてChromeを選択...
#ref(debug.png);
デバッグ用の設定ファイルが生成されますが，ローカルファイ...
{
"name": "Launch index.html",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/index.html"
},
以上を追記したlaunch.json全体は例えば以下のようになります．
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microso...
"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ファ...
終了行:
**概要 [#n2829d24]
タイトル通り，Visual Studio Codeでthree.jsプログラムをTyp...
全てのソフトがマルチプラットフォームですので，OSを問わな...
**準備 [#n469e705]
当然Visual Studio Code（以下VSCode）は必須．
-https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx
パッケージマネージャー，npmを使用してTypeScriptのビルド環...
-https://nodejs.org/ja/
Chromeも必須．
-https://www.google.co.jp/chrome/browser/desktop/
VSCode上から拡張機能で，「Debugger for Chrome」をインスト...
-https://github.com/Microsoft/vscode-chrome-debug
#ref(chrome.png);
**TypeScript環境のセットアップ [#p15522d2]
以下を参考に．
https://code.visualstudio.com/docs/languages/typescript
まず，好みの場所に作業（プロジェクト）フォルダを作り，VSC...
#ref(./openfolder.png,50%);
次にTypeScriptの設定ファイル，tsconfig.jsonを作成します．...
#ref(./newfile.png,50%);
内容は以下にします．上記ページのサンプルから"target"を「e...
{
"compilerOptions": {
"target":"es2017",
"module": "commonjs",
"sourceMap": true
}
}
とします．
次に，VSCodeのTask Runnerという機能を使ってTypeScriptファ...
[表示]⇒[コマンド パレット]
#ref(./cp.png,50%);
もしくは Ctrl+Shift+P（Windowsの場合）でコマンドパレット...
#ref(./command.png,50%);
＞Tasks:Configure Default Build Task
↓
＞tsc:ビルド-tsconfig.json
を選択（文字を入力すると補完されて表示されます）．
選択するとtasks.jsonが自動生成されるのでそのままでOK．
VSCode上の統合ターミナルを開き，
#ref(./terminal2.png,50%);
ターミナルに以下を打ち込み，TypeScriptビルドのためのモジ...
>npm install -g typescript
Windows以外は管理者権限で，
>sudo npm install -g typescript
じゃないとたぶんエラー．
#ref(terminal.png);
**three.js周りのセットアップ [#g93b0da6]
ひとまず動くプログラム(+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 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....
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.scr...
this.renderer.setClearColor(new THREE.Color(0x49...
document.getElementById("viewport").appendChild(...
}
private createScene() {
this.scene = new THREE.Scene();
this.geometry = new THREE.BoxGeometry(1, 1, 1);
this.material = new THREE.MeshLambertMaterial({ ...
this.cube = new THREE.Mesh(this.geometry, this.m...
this.scene.add(this.cube);
this.camera = new THREE.PerspectiveCamera(75, th...
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でビルドし，エラーがでず，a...
**デバッグ設定 [#l4030b77]
VSCodeのデバッグを選択し，歯車をクリックしてChromeを選択...
#ref(debug.png);
デバッグ用の設定ファイルが生成されますが，ローカルファイ...
{
"name": "Launch index.html",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/index.html"
},
以上を追記したlaunch.json全体は例えば以下のようになります．
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microso...
"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ファ...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
