Three.jsの便利なライブラリ８選

WebGL Advent Calender ８日目。

まずここに、７日も過ぎての投稿になってしまったことをお詫び申し上げます・・・！
完全に忘れていたとは口が裂けても言えないですね。

# Three.jsは実は沢山のライブラリがある

試しに[Three.jsのGithubリポ](https://github.com/mrdoob/three.js)をフォークしてみると、

- 本体
- 本体のソース・ファイル（たくさんの.jsファイル） 
- Example
- build用スクリプト

などなど、色んなファイルが置いてありますね。

今日見ていくのは、
`Example > js` ディレクトリです。

```
examples
├── js
    ├── cameras
    ├── controls
    ├── crossfade
    ├── curves
    ├── effects
    ├── exporters
    ├── geometries
    ├── libs
    ├── loaders
    ├── math
    ├── modifiers
    ├── physic
    ├── postprocessing
    ├── renderers
    ├── shaders
    ├── utils
    └── wip
```

この中に、Exampleで使われている便利プラグインが山ほど眠っているわけなのです。
この山ほどある資源を活用したら、開発が楽になるのではないでしょうか？
ということで、Mr.doobがgithubに隠した財宝探しの旅に出ようではありませんか。

... とはいっても、`example/**/*.js` ファイルだけで200以上もあるので、
ここでは、`使い勝手が良い && よく使いそう && なんか面白そう`なもの８個に絞って紹介します。

# Three.jsの便利なライブラリ８選

## 1.OculusRiftEffect.js
めちゃくちゃ手軽にOculus用の画面を出力してくれるプラグインです。

![Screen Shot 2014-12-12 at 03.09.18.png](https://qiita-image-store.s3.amazonaws.com/0/49526/54b4d5d3-8c65-aee9-cb68-1a595c25545e.png)


※使用方法

```js
// setup
effect = new THREE.OculusRiftEffect( renderer, {worldScale: 100} );
effect.setSize( window.innerWidth, window.innerHeight );

// renderer
effect.render( scene, camera );
```

たったこれだけで、Oculus対応ができちゃいます。
内部的には、Shederでsceneを歪ませてレンダリングしているっぽいです。
こういうめんどくさいShader系の処理は、車輪の再発明をセずにあるものを使ったりForkしたりするのが吉ですね。


## 2.FirstPersonControlls.js

WASDやマウスで視点の移動を行えるようになるプラグインです。
これも導入は簡単

```js

controls = new THREE.FirstPersonControls( camera );

//renderer
controls.update();
```

control系は他にもいろいろありますので、時と場合に応じて使い分けるのが吉でしょう。

- **DeviceOrientationControls.js** //sp
- EditorControls.js
- FlyControls.js
- OculusControls.js
- **OrbitControls.js** //easy
- OrthographicTrackballControls.js
- PointerLockControls.js
- TrackballControls.js
- TransformControls.js

## 3.Ocean.js

簡単に太平洋を出現させることの出来るプラグインです。


![Screen Shot 2014-12-12 at 03.11.19.png](https://qiita-image-store.s3.amazonaws.com/0/49526/cd46b255-13b7-04b5-7c10-a2f6858da370.png)


```js

waterNormals = new THREE.ImageUtils.loadTexture( 'textures/waternormals.jpg' );
waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping; 

water = new THREE.Water( renderer, camera, scene, {
	textureWidth: 512, 
	textureHeight: 512,
	waterNormals: waterNormals,
	alpha: 	1.0,
	sunDirection: light.position.clone().normalize(),
	sunColor: 0xffffff,
	waterColor: 0x001e0f,
	distortionScale: 50.0,
});

//renderer
water.material.uniforms.time.value += 1.0 / 60.0;
water.render();
```

ちょっと複雑ですが、これだけで海を描画しています。

## 4.WebGLDeferredRenderer.js

```js

renderer = new THREE.WebGLDeferredRenderer( options );

```

rendererの仕組みを変えているだけですが、結構重要な仕組みです。
出力する物を、並列読み込みではなくて、順次直列読み込みするので、
すべてのデータが読み込み終わるまで処理が止まるなんてことはなくなります。

目に見えるものを先に読み込んで、後でロードすればいいものは後回しにする
ということが可能になります。

## 5.ImprovedNoise.js

Perlin Noiseを手軽に取り出せます。

![Screen Shot 2014-12-12 at 03.13.03.png](https://qiita-image-store.s3.amazonaws.com/0/49526/00dec308-5223-2be5-6ba4-5730cce270f4.png)


```js

perlin = new ImprovedNoise();
value = perlin.noise(x,y,z);

```

みんな大好きPerlinNoiseが簡単に取り出せます。

メッシュをコレで作れば地形とか書けます。

## 6.TypedArrayUtils.js

```js
// kd木探索法
kdtree = new THREE.TypedArrayUtils.Kdtree( points, metric, eleSize );
// クイックソート
quicksortIP = THREE.TypedArrayUtils.quicksortIP(arr, eleSize, orderElement);

```

配列の高速計算が出来ます。jsの型付配列とすごいアルゴリズムが使われています。
距離計算とか沢山のオブジェクトでやりたいときは、コレを使うといいんではないでしょうか？
他にも、`SimplexNoise.js`というのもあるみたいです。

## 7.GeometryUtils.js

Geometryに色々な便利なものを付け加えることが出来ます。

```js

geometryUtil = new THREE.GeometryUtil();

// くっつけたり
geometryUtil.merge( geometry1, geometry2, materialIndexOffset )
// Geometryの中にランダムに点を撮ったり
geometryUtil.randomPointInTriangle(vectorA, vectorB, vectorC)
geometryUtil.randomPointInFace( face, geometry, useCachedAreas )
geometryUtil.randomPointsInGeometry( geometry, n )
geometryUtil.randomPointsInBufferGeometry( geometry, n )
// 三角形かいたり
geometryUtil.triangleArea(vectorA, vectorB, vectorC)

```

知らなきゃ損！

## 8.Detector.js

```js

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

```

- canvas
- webGL
- webWorker
- FileAPI

に対応しているか否か判定して、くれるライブラリです。
Fallbackは手動でお願いします。



---

以上になります。

この他にも、Shaderに関するプラグインや、Preprocessingに関するプラグインなど盛り沢山です。
Three.jsのコア機能以外にも色々と便利なものがあるということで、
それらを参考にしながらいいものを作りましょう。

以上です。