mieki256's diary

three.jsを使って、一本道を延々と走るソレをどうにか書けたのでアップロード。F11キーを押して全画面表示すると、コレでも結構迫力が。

_roadmake4.html (DEMO)
使用画像。
_road2.png
_bg.jpg
_tree0.png
_tree1.png
_tree2.png
_tree3.png

ソースも画像も CC0 / Public Domain ってことで。

◎ 課題。 :

◎ 夜版も作ってみた。 :

手元で色々試したけど、どうも THREE.Points だけをシーンに追加する分には、Firefox 上でも Points が問題無く表示されるっぽい。しかし、Points 以外の何かしらもシーンに追加すると、途端に Points が表示されなくなるようで。

three.js のサンプルは、Points だけをシーンに追加してるから、Firefox上でも描画できているっぽいなと…。

試しに、Points群を最初にシーンに追加してから、その後、他の Mesh をシーンに追加してみた。

_billboard_test2_c.html (DEMO)

  for (var i = 0; i < 64; i++) {
    var w = getRandomArbitary(128, 256);
    
    var x = getRandomArbitary(-r, r);
    var y = w / 3.5; // 何故この値になるのか分からない…
    var z = getRandomArbitary(-r, r);
    
    var geom = new THREE.Geometry();
    geom.vertices.push(new THREE.Vector3(x, y, z));

    var mat = new THREE.PointsMaterial({
      size: w,
      map: texTrees[Math.floor(Math.random() * texTrees.length)],
      fog: true,
      alphaTest: 0.5, // コレを入れないと透過部分がおかしくなる
    });

    var tree = new THREE.Points(geom, mat);
    scene.add(tree);
  }

  // 何故か Firefox は、Points以外を後から追加しないと正常動作しない
  scene.add(plane);
  scene.add(box);

コレだと描画される…。シーンに追加する順番で違ってくるのだろうか…。

Points の、y座標の意味も、相変わらず分からない。値を少しずつ変えて試していたら、サイズ / 3.5 を代入した時に位置が合うように見えたのだけど。どうしてそこで 3.5 なる数字になるのか…。

まあ、Points を使うと、座標が画面外に出た瞬間にパカッと消えてしまうので、どのみち使いどころが難しいような気も。ただ、three.js のサンプルは、パカッと出たり消えたりしてるようには見えないわけで。何故なんだろう…。