三次元日誌(hugo)

threejsとwebsocketを使った開発環境

threejs websocket

threejsのソースを自前で、minimizeする環境を模索する。

threejs再始動

threejs

前のサイトはgulpを使ってtypescriptでthreejs.jsしていたのだけど、hugoで生成している今サイトでは素のjavascriptかなぁ。 es6の練習を兼ねて。

Three.jsでbvh

threejs typescript bvh
/ BVH labsを参考にやってみる。 モーションは 続 BVHファイルを探してみたで紹介されていた https://sites.google.com/a/cgspeed.com/cgspeed/motion-capture から拝借。 上記のサイトのコードをtypescrip

Three.jsでpmd読み込み

threejs typescript mmd
こちらのモデルを使わせていただいております。 threejs_pmd_loader.ts source PmdLoader.ts source 変換せずに直接Pmdを読み込むべくカスタムローダーを作ってみよう。 まず、SJIS操作が必

Three.jsのトランスフォームコントロールでメッシュをマウスで移動

threejs typescript gui
"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 をやってみよう。 まず、TransformContr

dat-guiを試してみる

threejs typescript 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

Three.jsのEditor

threejs gui
Three.js本家のサイトにeditor (beta)というリンクあるのだけどこれ面白いなぁ。 わりといろんなことができそうだし、いまわしの中

Three.jsのBuild

threejs gulp
骨入りモデルとかやってみようかと思ったのだけど、その前にThree.jsのソースを見やすい状態で作業したい。 結合前のThree.jsを自前ビ

Three.jsのJSONモデルフォーマット

threejs typescript
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 =

グリッドと軸と光源とFPS表示を入れる

threejs typescript
source シーンを強化してみる。 軸 先人が記事を残してくれていたので楽ちん。 Three.js AxisHelper //軸の長さ1000 var axis = new THREE.AxisHelper(1000); //sceneに追加 this.scene.add(axis); グリッド Three.js GridHelper //G

Three.jsにマウスによる視点操作を入れる

threejs typescript gui
source 今回は、TrackballControlsを導入します。 TrackballControlsはThree.jsのライブラリ内に含まれるのでは

TypeScriptでThree.jsことはじめ

threejs typescript

TypeScriptを学び始めた目的のひとつであるThree.jsをようやくはじめた。 「Node.jsとSocket.IOで連結してリアルタイムにシーンをアニメーションするっ」とか 遠大な構想だったのだが小さいところから始めよう。