mieki256's diary

最初、カメラの動かし方が分からなかったけど。あちこちの解説ページを見ながらコピペして試していたら、以下のような記述で動いてくれた。

    camera.lookAt({ x: tgtx, y: tgty, z: tgtz });
    camera.position.set(camposx, camposy, camposz);
    camera.up.set(0, 1, 0);

lookAt() で注視点を、position.set() で位置を、up.set() で向き？ 天井がどちらにあるか？ を指定してるらしい。

例えば、var geom = new THREE.Geometry(); でジオメトリを作って、そこに頂点や面を自分で追加して。そのジオメトリ内の頂点座標が後で変化する場合、そのままではレンダラーに渡した時の座標値のままで変化しない・固定された状態になるらしい。

頂点座標その他が変化した時は、ジオメトリを更新しないといけないようで。関係ありそうなところだけ抜き出してみると…。

レンダリング前に、.dynamic = true; を1回設定してから…。

    // Mesh生成
    function initMesh(scene) {

      // メッシュ作成
      geom = new THREE.Geometry();
      road = new Road(geom);

      geom.mergeVertices();

      // 法線ベクトル生成(自動計算)
      geom.computeFaceNormals();
      geom.computeVertexNormals();
      geom.computeBoundingSphere();

      // メッシュをシーンに追加
      var mesh = new THREE.Mesh(geom, material);
      scene.add(mesh);

      // 頂点座標が一部変化するのでGeometryを更新可能にしておく
      geom.dynamic = true;
    };

頂点座標が更新される度に、*NeedUpdate = true; を設定するようで。

      function rendering() {
        // 前フレームからの経過時間を取得
        var lastTime = getTime();
        var dt = (lastTime - startTime) / 1000.0;

        // 時間を進める
        gTime += dt * 6;
        if (gTime >= 1.0) {
          road.incIndex();
          gTime -= 1.0;

          // 頂点座標が一部変化するのでGeometryを更新
          geom.verticesNeedUpdate = true;
          geom.elementsNeedUpdate = true;
          geom.normalsNeedUpdate = true;
          geom.uvsNeedUpdate = true;

          // 法線ベクトル等を再計算
          geom.computeFaceNormals();
          geom.computeVertexNormals();
          geom.computeBoundingSphere();
        }

        renderer.clear();
        renderer.render(scene, camera);

        startTime = lastTime;
        requestAnimationFrame(rendering);
      }
      rendering();

テクスチャ読み込み後、minFilter や magFilter の種類を変更したらぼけなくなった。

    // テクスチャ読み込み
    function loadTexture() {
      var loader = new THREE.TextureLoader();
      texture = loader.load('images/tex2.png');
      texture.minFilter = THREE.LinearFilter;
      texture.magFilter = THREE.LinearFilter;
    };