gopherくんのjsonデータがthree.jsのr85以降表示されなくてはまった
この記事は@kjunichiの2017年パーソナルアドベントカレンダーの19日目の記事です 。
背景
デスクトップマスコットのgopheronをWindowsでの謎の遅延現象を解決すべく、別ファイルになったCanvasレンダーでの対応 を試みようと、まずは久しぶりにthree.jsをアップデートしようとした。
最新版だと何も表示されない！
これまで、多少はthree.jsのバージョンを上げると、文句言われたり動かないことはあったが、今回は つい最近みた、子供とつくってるくるまのゲームで見かけたMutliMaterialがdeprecatedになったという警告のみ、 エラーはなく、しかし、画面に読み込んだはずのgopher君の姿がない！
r85でも読み込んだgopherくんが表示出来た
当初はマテリアルの指定が問題と疑い、Blenderを最新化して、Three.jsの最新のblenderプレグイン入れて、 JSONを吐きなおさせてみたが改善しない。
子供たちと作ってるゲームではMultiMaterialの警告は出るが、ふつうに車が表示されている。
そこで、ミニマムの構成でGopher君の本体のJSONのみ読み込んで見た。
Three.jsのトップページのコード例だとライトの設定が無く、ハマりかけたが、 なんとか気づくことが出来、光源の設定をおこなったら、あっさり表示された。
驚愕の結末
最終的に、表示されてるコードと動かない既存のコードを見比べ言ったら なんと
camera.lookAt(0);
この一文が原因だった。
少なくともr84ではこの指定でガメラの目標が原点に設定されたが、r85以降はこれが、全てを台無しにする設定となっていた。
座標を指定したい場合
camera.lookAt(new THREE.Vector3(1,2,3));
とする模様。
