typescript

Node.jsでSocket.IOなアプリをHerokuにデプロイ
Socket.IOサーバーとしてHerokuを使ってみよう。 実験中 https://shielded-caverns-4913.herokuapp.com/ Heroku練習 以前作ったユーザーが生きていたので改めてチュートリアルを実践。 Getting Started with Node.js on Heroku gulpでexpressなサーバを作る 普通にnpmなプロジェクトを作る。 > mkdir bvh_sio > cd bvh_sio > npm init > mkdir src > mkidr src/server > mkdir src/client > cd src > tsd init > tsd query node -rosa install > tsd query express -rosa install > tsd query serve-static -rosa install > tsd query socket.io -rosa install Herokuにデプロイする場合はでdevDependenciesじゃなくてdependenciesに書くらしいのでそのようにした。 package.json { "name": "bvh_sio", "version": "1.

Three.jsでbvh
/ BVH labsを参考にやってみる。 モーションは 続 BVHファイルを探してみたで紹介されていた https://sites.google.com/a/cgspeed.com/cgspeed/motion-capture から拝借。 上記のサイトのコードをtypescript化しながら解読中。 THREE.Skeletonというクラスがボーンアニメーションをしているらしい。 Sliderつけてみた https://refreshless.com/nouislider/

Three.jsでpmd読み込み
こちらのモデルを使わせていただいております。 threejs_pmd_loader.ts source PmdLoader.ts source 変換せずに直接Pmdを読み込むべくカスタムローダーを作ってみよう。 まず、SJIS操作が必要なのでこちらを使わせて頂いた。 * https://github.com/polygonplanet/encoding.js あとはJSONLoaderを参考にしてArrayBufferから地道に情報を切り出していく。 ArrayBufferから情報を切り出すのはこつがわかれば簡単で以下のようなヘルパークラスを作れば さくさくできる。 BinaryReader class BinaryReader { m_buffer: ArrayBuffer; m_postiion = 0; constructor(buffer: ArrayBuffer) { this.m_buffer = buffer; } read(length: number) { var slice = this.m_buffer.slice(this.m_postiion, this.m_postiion + length); this.m_postiion += length; return slice; } readString(length: number): string { var slice = new Uint8Array(this.read(length)); let i = 0; for (; i < slice.byteLength; ++i) { if (slice[i] == 0) { break; } } return Encoding.

Three.jsのトランスフォームコントロールでメッシュをマウスで移動
"W" translate | "E" rotate | "R" scale | "+" increase size | "-" decrease size Press "Q" to toggle world/local space, keep "Ctrl" down to snap to grid source 今回は、本家サイトのサンプル http://threejs.org/examples/#misc_controls_transform をやってみよう。 まず、TransformControlsのtypescriptインターフェースを用意する。 というか書きながら作った。 TransformControls.d.ts。モジュールの細かいところがよくわからん・・・ declare module THREE { export class TransformControls extends THREE.Mesh { constructor(camera: THREE.Camera, element: Element); update():void; addEventListener(event: string, callback: Function): void; attach(mesh: THREE.Mesh): void; setSpace(space: string): void; setTranslationSnap(snap: number): void; setRotationSnap(radians: number): void; setMode(mode: string): void; setSize(size: number): void; space: string; size: number; } } TransformControlsを初期化する。カメラとhtmlノードを渡して初期化する CreateTransformControl(mesh: THREE.

dat-guiを試してみる
view typescript view javascript たまにthree.jsのデモと連動して使われているGUIライブラリdat-guiを試してみる。 https://code.google.com/p/dat-gui/ http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage https://stemkoski.github.io/Three.js/#gui ライブラリを導入 > bower install dat.gui > tsd query dat-gui -rosa install dat.GuiControllerのnameプロパティがtypings/dat-gui/dat-gui.d.tsで未定義だった。 bower_components/dat.gui/dat.gui.jsでは定義されていた。 /** * The name of <code>GUI</code>. Used for folders. i.e * a folder's name * @type String */ name: { get: function() { return params.name; }, set: function(v) { // TODO Check for collisions among sibling folders params.name = v; if (title_row_name) { title_row_name.

Three.jsのJSONモデルフォーマット
source 外部のJSONに記述されたモデルを読み込む機能がある。 External models in Three.js を見てやってみた。 OnLoad(geometry: THREE.Geometry, materials: THREE.Material[]) { // create a mesh with models geometry and material var material = new THREE.MeshPhongMaterial(materials[0]); var mesh = new THREE.Mesh( geometry, material ); mesh.rotation.y = -Math.PI / 5; this.scene.add(mesh); this.Render(); } OnProgress(event: any) { console.log('OnProgress: ', event); } OnError(event: any) { console.log('OnError: ', event); } AddModelFromJson(path: string) { var loader = new THREE.JSONLoader(); // init the loader util // init loading loader.

Three.jsにマウスによる視点操作を入れる
source 今回は、TrackballControlsを導入します。 TrackballControlsはThree.jsのライブラリ内に含まれるのではなくexamples扱いなので、 直接コードを入手。 使い方は、TrackballControlsのソースを見ると 以下のようにするらしい。 controls = new THREE.TrackballControls( camera ); controls.rotateSpeed = 1.0; controls.zoomSpeed = 1.2; controls.panSpeed = 0.8; controls.noZoom = false; controls.noPan = false; controls.staticMoving = true; controls.dynamicDampingFactor = 0.3; controls.keys = [ 65, 83, 68 ]; controls.addEventListener( 'change', render ); もうひとつ更新用に以下のコードも必要。 function animate() { requestAnimationFrame( animate ); controls.update(); } やってみよう。 ベースのレンダリングシーン シーンに適当にキューブを描画するコード。 前回の記事をほぼ流用だけどいくつか変更点がある。 namespaceでかこって名前衝突から防衛 CreateCameraを独立 キューブがアニメーションする部分をオミット threejs_02.ts /// <reference path='.

TypeScriptでThree.jsことはじめ
source TypeScriptを学び始めた目的のひとつであるThree.jsをようやくはじめた。 「Node.jsとSocket.IOで連結してリアルタイムにシーンをアニメーションするっ」とか 遠大な構想だったのだが小さいところから始めよう。 hello world的な 本家のgetting started htmlにスクリプトを追加。 <script src="threejs_01.js"></script> threejs_01.js var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75 , window.innerWidth / window.innerHeight , 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; var render = function() { requestAnimationFrame(render); cube.

グリッドと軸と光源とFPS表示を入れる
source シーンを強化してみる。 軸 先人が記事を残してくれていたので楽ちん。 Three.js AxisHelper //軸の長さ1000 var axis = new THREE.AxisHelper(1000); //sceneに追加 this.scene.add(axis); グリッド Three.js GridHelper //GridHelper(大きさ, 1マスの大きさ) var grid = new THREE.GridHelper(100, 10); //シーンオブジェクトに追加 this.scene.add(grid); 光源 ライトを追加して、マテリアルを光に反応するタイプに付け替える。 // lights var directionalLight = new THREE.DirectionalLight(0xffffff); directionalLight.position.set(0, 0.7, 0.7); this.scene.add(directionalLight); // materialを交換 //var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var material = new THREE.MeshPhongMaterial({ color: 0xff0000 }); FPS状態表示 WebGLのデモでよく見かけるFPS表示を入れてみる。 https://github.com/mrdoob/stats.js ライブラリと定義をインストール。 > bower install stats.