three.js/WebGLを使って3Dゲームを作る計画を立てていて、あれこれと実験中。
上のスクリーンショットは、解像度320x240で、CSSによって２倍サイズ表示しているところ。three.jsによって、ライティングやシャドウを実現している。同時に、Physi.jsというammo.jsをベースにしたthree.js向けの物理エンジンによる物理演算も行なっている。これのせいか、少し古いPCでは動作がカクカクしてしまう。
こちらは、PlaneGeometryの各頂点の高さをランダムに変えて、でこぼこにしたところにフリー素材の草のテクスチャを貼りつけたところ。テクスチャの張り具合がアレなので、ここにもしキャラクターを置いたりしたら、巨大な草になってしまう感じだったので、あれこれ調整して草が大きくならないように頑張ってみた。
結果、テクスチャのRepeatを4x4にすることで、うまい具合の草の大きさになったかも。
そしてここに、プレイヤーキャラクターに見立てた直方体を置いて、WASD操作もしくはカーソルキー操作によって奥手前左右に動けるようにしてみて、背後からカメラで追いかけてみたところ。うまく地面に乗るようにする高さ調整を、キャラクター位置から地面に向かってRayを飛ばして衝突したポリゴンの衝突点のY座標で割り出して見てるんだけど、どうもうまくいかなくて、めり込んだり空中を飛んだりする。なんとかしたいところ。
