gui

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.

Treeを表示・操作する
JavascriptでTreeを表示操作するライブラリを探してみる。 なんとなくサンプルが充実している jqTree にしてみた。 このサンプルに必要だったのでFontAwesomeも取り入れてみた。 めんどくさいので避けていたが、そろそろscssを取り入れるべきか。

Three.jsのEditor
Three.js本家のサイトにeditor (beta)というリンクあるのだけどこれ面白いなぁ。 わりといろんなことができそうだし、いまわしの中で流行り出しているSPAとしてとてもよさげだ。 使っている外部ライブラリ いろんなものが入っている。 system.js http://www.javascriptoo.com/System-js System情報取得ライブラリ jszip.js http://stuk.github.io/jszip/ JavascriptでZipを作る。そんなライブラリあるのんか。 codemirror https://codemirror.net/ acorn https://marijnhaverbeke.nl/acorn/ ternjs http://ternjs.net/ sortable https://github.com/RubaXa/Sortable js-signals https://github.com/millermedeiros/js-signals ui.js https://jqueryui.com/ app.js http://code.kik.com/app/3/index.html という感じでいろんなライブラリが組み合わされている。 最近のJavascriptはこんなことになっているのか・・・ entrypointは・・・ index.htmlで初期化が走っていてuiの構築はたぶんこれ。 var editor = new Editor(); var viewport = new Viewport( editor ); document.body.appendChild( viewport.dom ); var player = new Player( editor ); document.

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='.