three.jsのヘルパー一覧【GIFアニメ付き】

この記事は、<a href="http://qiita.com/advent-calendar/2016/threejs" target="_blank">Three.js Advent Calendar 2016</a> 19日目の記事です。

**three.jsでいくつかヘルパーが用意されているのを知っていますか？　**ほぼ全てのヘルパーがどのように表示されるかをGIFアニメーション画像でまとめてみたので参考ください。

# ヘルパー一覧

順にヘルパーを紹介します。それぞれに解説記事へのリンクもあるのでそちらも使用ください。

## ①ArrowHelper

3Dの矢印オブジェクトです。このArrowHelperを使うことでベクトルを可視化できるため、開発時やバグの検証時に役に立ちます。


![ArrowHelper](https://qiita-image-store.s3.amazonaws.com/0/42248/c95aced3-1e0e-3be2-f9c6-cfe67bfe7a98.gif)

[解説記事→](http://qiita.com/sawa-zen/items/c31a5a07e8bb6e6a6fa0)



## ②AxisHelper

X、Y、Zの三軸を可視化してくれるヘルパーです。Xが赤、Yが緑、Zが青で表示されます。カメラやオブジェクトがどちらを向いているか分かりにくい際に表示させると便利です。

![AxisHelper](https://qiita-image-store.s3.amazonaws.com/0/42248/47daca33-8896-74bc-d5cb-3762d2c87c98.gif)

[解説記事→](http://qiita.com/sawa-zen/items/d31d16c558e752a59c57)



## ③BoundingBoxHelper

オブジェクトの境界エリアを可視化してくれるヘルパーです。大雑把なあたり判定であればこのBoxを活用するとシンプルな実装で済むのでおすすめです。

![BoundingBoxHelper](https://qiita-image-store.s3.amazonaws.com/0/42248/85ef4dde-b156-bf14-0cd1-c2063027ba5b.gif)

[解説記事→](http://qiita.com/sawa-zen/items/0e64484ebe5f47d0dd95)



## ④BoxHelper

オブジェクトの境界エリアを可視化してくれるヘルパーです。BoundingBoxHelperと似ていますが、こちらはMeshではなくLineで構成されています。境界エリアだけを確認したい場合はこちらを使用をオススメします。

![BoxHelper](https://qiita-image-store.s3.amazonaws.com/0/42248/6e61da39-6a70-a283-d9c5-dcb00db0d586.gif)

[解説記事→](http://qiita.com/sawa-zen/items/76abc2cfd65b66c811ce)



## ⑤CameraHelper

カメラを可視化してくれるヘルパーです。画角、アスペクト比、ニアークリップ、ファークリップ、アップベクターがひと目で確認できます。オブジェクトがカメラの射程内にいるかを確認する際や、カメラのアニメーションをする際に活用できます。

![CameraHelper](https://qiita-image-store.s3.amazonaws.com/0/42248/845a48d9-4d2a-5cfe-5eb0-ff1ad86b9ec1.gif)

[解説記事→](http://qiita.com/sawa-zen/items/90835db9eb5e9307d3fb)



## ⑥DirectionalLightHelper

平行光源(DirectionalLight)を可視化してくれるヘルパーです。平行光源の向きがどちらに向いているかを確認できます。簡素なラインだけで構成されているため、ひと目で向きが解り難いことが有ります。ArrowHelperを使用したほうが分かりやすいかもしれません。

![DirectionalLightHelper](https://qiita-image-store.s3.amazonaws.com/0/42248/e42b6216-ec71-b890-979f-2ab7e6ed027d.gif)

[解説記事→](http://qiita.com/sawa-zen/items/58af740bfe57516384c7)



## ⑦EdgeHelper

オブジェクトのハードエッジとなっている部分を可視化してくれるヘルパーです。全てのエッジを表示させるわけではないので、ワイヤーフレームを表示させたい場合はWireframeHelperを使用して下さい。

![EdgeHelper](https://qiita-image-store.s3.amazonaws.com/0/42248/14bff7db-e09c-c345-f8a9-c95ca0afe428.gif)

[解説記事→](http://qiita.com/sawa-zen/items/24f68c74362f63fe1d39)



## ⑧FaceNormalsHelper

オブジェクトの面法線を可視化してくれるヘルパーです。独自で作ったジオメトリーや、外部から読み込んだモデルの法線を確認したい場合に重宝します。

![FaceNormalsHelper](https://qiita-image-store.s3.amazonaws.com/0/42248/010d9e13-0300-9f54-8c25-5d725b1464d7.gif)

[解説記事→](http://qiita.com/sawa-zen/items/a49bfebbe2cdc2883b75)

## ⑨GridHelper

グリッドを表示してくれるヘルパーです。床として設置しておくとオブジェクトの位置などが把握しやすくなります。three.jsで開発する際はまずこのヘルパーを設置してから始めると効率良く進められるのでおすすめです。

![GridHelper](https://qiita-image-store.s3.amazonaws.com/0/42248/2abb393d-17c2-bf39-12f9-6df2bf28eed9.gif)

[解説記事→](http://qiita.com/sawa-zen/items/4f410abc9be41b283598)

## ⑩VertexNormalsHelper

頂点法線を確認できるヘルパーです。blenderなどからモデルを出力した時の確認として使用すると便利です。

![VertexNormalsHelper](https://qiita-image-store.s3.amazonaws.com/0/42248/60dd12b4-9f4c-599e-ba24-e7281271015f.gif)

[解説記事→](http://qiita.com/sawa-zen/items/6236a38ad8b6a553caee)


# 最後に

ヘルパーは開発時の助けになるのでどんどん使っていく事をおすすめします。どんなヘルパーがあったか忘れてしまった場合はこの記事を見て思い出していただけたら幸いです。