03 Axis Helper

three.jsにはヘルパーオブジェクトが用意されている。Red=X, Green=Y, Blue=Z。

WebGL/OpenGLは右手座標系を使うので、Z(青)が手前を向く。

サンプルではMeshDepthMaterialを使った板ポリmeshを回転させている。カメラのnearに近いほど白く、farに近いほど黒くなる。

PlaneGeometryはXY面に定義されるので、geometryを90度回転させてからmeshに渡した。描画関数でmeshをY軸で回転させている。geometryを回転させるのか、meshを回転させるのか。判断を間違えると思い通りに動かない。