グリッドと軸と光源と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.js --save
> tsd query stats -rosa install

2箇所更新になる。

// add stats
$container.css({ position: 'relative' });
this.stats = new Stats();
this.stats.domElement.style.position = 'absolute';
this.stats.domElement.style.top = '0px';
this.stats.domElement.style.zIndex = '100';
$container.append(this.stats.domElement);

// update stats
Animate() {
    requestAnimationFrame(this.Animate.bind(this));
    this.controls.update();
    this.stats.update();
}
comments powered by Disqus