non vorrei lavorare

2020年度からの小学校プログラミング教育の必修化を親として迎えるブロガーの書く、子供との日常

gopherくんのjsonデータがthree.jsのr85以降表示されなくてはまった

この記事は@kjunichiの2017年パーソナルアドベントカレンダーの19日目の記事です 。

背景

デスクトップマスコットのgopheronWindowsでの謎の遅延現象を解決すべく、別ファイルになった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));

とする模様。

関連記事