mieki256's diary

色々と試しているところ。今現在、こんな感じに。

_roadmake2.html (DEMO)

例えばブラウザ(Firefox、Google Chrome)で表示した後、F11キーを押して全画面表示にすると、それだけでも結構迫力がある、かもしれず。ちなみに、全画面表示を抜ける時は同じくF11キー。

画面に変なポリゴンが描画されてしまうのは、geom.mergeVertices(); を入れてたから、だった模様。コメントアウトしたら変なポリゴンが描画されなくなった。重複した頂点を結合してくれる機能らしいけど、与える頂点群によっては妙な処理がされてしまう時があるっぽい。

背景も追加。three.js サンプルの、 _panorama / equirectangular が参考になった。件のサンプルでは、球を追加して equirectangular 画像(正距円筒図法の画像)をテクスチャとして割り当てているっぽい。BG用の mesh を作成して、mesh.position.set(x, y, z); で、カメラの位置座標を常時入れてやったら、それらしく表示された。

遠くにあるテクスチャがぼけてしまう問題を minFilter の設定を変えることで一旦解決したけれど。texture.anisotropy の値を変更することでも解決できそうなので、そちらを使ってみたり。デフォルトでは1が入ってるらしいけど、以下のように記述して最高品質を指定。

  texture.anisotropy = renderer.getMaxAnisotropy();

ブラウザを全画面表示にするとスクロールバーが表示されてしまうあたりが気になってたけど。各サンプルを眺めていたら、body のスタイルシートで、overflow: hidden; を指定することでスクロールバーが出てこないようにしていたので、手元のソースでもそのように修正。

  <style>
    body {
      margin: 0px;
      padding: 0px;
      overflow: hidden;
    }
  </style>

さて。ビルボードで木を追加したいけど、何を使えばビルボードになるのやら…。