Three.jsで何か作ってるとき、画面にオブジェクトが表示されなくてしばらく時間を費やしてしまうことがちょくちょくある。わかってみたら単純でアホみたいなミスばかりなんだけど、実際画面に何も表示されないって状況に直面すると「どこからチェックしよ…」ってなってしまうので、ありえる原因を書き出して今後の参考にしようと思う。
Canvas
renderer.domElementであるcanvasはちゃんと正しい場所に正しい大きさで存在してる？
ウェブページ自体の背景をsceneの背景色と同じにしてたら気づきにくいので、ちゃんとinspectorで見る。
Canvas element - Renderer - Scene - Cameraの繋がり
renderer.domElementは意図したcanvas elementになってる？
Renderer.render()に正しいsceneとcameraが渡されてる？
Material
オブジェクトのマテリアルはちゃんとsceneの背景色と識別できる色？
opacityが0になってたりせん？visibilityはtrue？
material.sideは意図した方向になってる？
Position
デフォルトではカメラは原点で-Zの方向を向いてるので、オブジェクトはそこから見えるところに置いといた方がいい。
カメラとオブジェクトが重なってたり、オブジェクトの内側にカメラがいたりしたら（materialを背面に設定していない限り）見えないから気をつけて。
Add
ちゃんとscene.add(object)した？sceneにちゃんと入ってるか、scene.childrenで確認して。
Render
ちゃんとrenderしてる？requestAnimationFrame()で毎フレームrenderしてる？
完全に静止してるやつやったら一回だけのrenderでもいいけど、それならオブジェクトのセッティングとか全部render前に済ませよう。texture画像の読み込みみたいな非同期処理はrenderが実行される前に終わらんこともあるし。
Fog
Fogが濃すぎてオブジェクト見えないとかない？とりあえずfog無効にしよ。
Camera depth
camera.nearとcamera.farは適切？範囲が狭すぎたらオブジェクトがクリップされてしまう。
Controls
FlyControlsとかがちゃんと動いてる前提でカーソルぐるぐる動かしてても、実はカメラ全然動いてないとかありえるから、camera.positionとかcamera.rotationが変動してるか確認しよ。
おまけ: tweenしても動かんとき
tween.startしてる？
tween.updateしてる？
update毎にちゃんと値を代入してる？
needsUpdateをtrueにしなければいけないとかない？ちゃんとドキュメント見て。
今思いつくんはこれくらいかな。何かめちゃくちゃうざいチェックリストになってしまった。
