【ライブラリ】ヘルパー

REVISION: '78'

URL#debug でヘルパーライブラリを読み込む仕様にしておくといい

stats.js

FPSを表示する

stats.js使用時のテンプレ

var stats = initStats();

function render(){
  stats.update();
  
}

function initStats() {

  var stats = new Stats();

  stats.setMode(0); // 0: fps, 1: ms

  // Align top-left
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.left = '0px';
  stats.domElement.style.top = '0px';

  document.getElementById("Stats-output").appendChild(stats.domElement);

  return stats;
}

dat.gui.js

コード内のパラメーターをユーザーが調整できるUIコンポーネント。

全パターン：http://qiita.com/mo4_9/items/9e9222cab4ba8b5e5ac9

dat.gui.jsを使用時のテンプレ

var controls = new function () {
    this.rotationSpeed = 0.02;
    this.bouncingSpeed = 0.03;
    this.scaleX = 1;
    this.scaleY = 1;
    this.scaleZ = 1;
    this.ambientColor = ambiColor;
    this.addCube = function () { ... }; // 関数も可
    this.outputObjects = function () {
		console.log(scene.children);
    };
};

var gui = new dat.GUI();
// obj, property, min, max
// プロパティが表示される名前になる
gui.add(controls, 'rotationSpeed', 0, 0.5);
gui.add(controls, 'bouncingSpeed', 0, 1.0);
gui.add(controls, 'addCube');
// addFolder()でグループ化できる
guiScale = gui.addFolder('scale');
guiScale.add(controls, 'scaleX', 0, 5);
guiScale.add(controls, 'scaleY', 0, 5);
guiScale.add(controls, 'scaleZ', 0, 5);
// 色はadd()ではなくaddColor()
gui.addColor(controls, 'ambientColor').onChange(function (e) {
    ambientLight.color = new THREE.Color(e);
});
// addCube()を実行してもnumberOfObjects()は実行されないので、
// 自動で実行されるようにlisten()が必要
gui.add(controls, 'numberOfObjects').listen();

// レンダリングの中でcontrolsオブジェクトのプロパティを直接参照する
function render () {
	cube.rotation.x += controls.rotationSpeed;
	cube.rotation.y += controls.rotationSpeed;
	cube.rotation.z += controls.rotationSpeed;
	
	cube.scale.set(controls.scaleX, controls.scaleY, controls.scaleZ);
	
	step += controls.bouncingSpeed;
}

参考
プログラムの中身を直感的なGUIで操作できるJavaScriptライブラリ「dat.gui」を使ってみた！
9. Updating the Display Automatically

組み込みHelper()

テンプレ

// helper
gridHelper = new THREE.GridHelper(200,50);
scene.add(gridHelper);
axisHelper = new THREE.AxisHelper(200,50);
scene.add(axisHelper);
lightHelper = new THREE.DirectionalLightHelper(light,20);
scene.add(lightHelper);

参考
初めてのThree.js 第2版――WebGLのためのJavaScript 3Dライブラリ