5

three.js を使用して、フリップ キューブ (別名マジック キューブ。このページのビデオなどを参照)を表示する Web ページに取り組んでいます。

キューブを反転

フリップ キューブでは、通常、キューブの複数の部分にまたがる画像があります。たとえば、上に示したボートの画像は、4 つの立方体の面全体に広がっています。three.js の用語では、マテリアル テクスチャに同じ画像を使用する必要がある複数のメッシュがありますが、それぞれのオフセットは異なります。

私が理解している限りでは、three.js では、オフセットはテクスチャのプロパティであり、マテリアルやメッシュのプロパティではありません。したがって、1 つのテクスチャを 2 つの異なる場所で異なるオフセットで使用することはできないようです。

つまり、ボートの画像の異なる部分を 4 つの異なる面に表示するには、4 つの個別のテクスチャを作成する必要があるということでしょうか。つまり、ボートの画像をメモリに 4 回読み込む必要があるということですか? そうではないことを願っています。

関連するコードは次のとおりです。

  // create an array with the textures
  var textureArray = [];
  var texNames = ['boat', 'camels', 'elephants', 'hippo',
    'natpark', 'ostrich', 'coatofarms-w', 'kenyamap-w', 'nairobi-w'];
  texNames.map(function(texName) {
    textureArray.push(THREE.ImageUtils.loadTexture(
      'images/256/' + texName + '.jpg' ));
  });

    // Create a material for each texture.
  for (var x=0; x <= 1; x++) {
    for (var y=0; y <= 1; y++) {
      for (var z=0; z <= 1; z++) {
        var materialArray = [];
        textureArray.map(function(tex) {
          // Learned: cannot set this offset for one material,
          // without it affecting all materials that use this texture.
          tex.offset.x = x * 0.2;
          tex.offset.y = y * 0.2;

          materialArray.push(new THREE.MeshBasicMaterial( { map: tex }));
        });
        var cubeMaterial = new THREE.MeshFaceMaterial(materialArray.slice(0, 6));
        var cube = new THREE.Mesh( cubeGeom, cubeMaterial );
        cube.position.set(x * 50 - 25, y * 50 - 25, z * 50 - 25);
        scene.add(cube);
      }
    }
  }

http://www.huttar.net/lars-kathy/tmp/flipcube.htmlでそれを見ると、すべてのテクスチャ イメージが各キューブレット面で同じ量だけオフセットされて表示されていることがわかります。異なるキューブレットで異なるオフセットに設定されています。これは、同じテクスチャを異なるオフセットで異なる用途に使用できないことを確認しているようです。

同じ画像を複数のテクスチャに何度もロードする必要がないように、異なるオフセットで同じテクスチャを使用するように異なるメッシュを取得するにはどうすればよいですか?

4

1 に答える 1

2

あなたの言うことは本当です。テクスチャ オフセットを調整する代わりに、ジオメトリのフェース頂点 UV を調整します。

編集：あなたがやりたいことにもっと沿った別の解決策があります。次のようにテクスチャを複製できます。

var tex = new THREE.Texture.clone();

テクスチャのクローンを作成すると、ロードされた画像が再利用され、新しいテクスチャは独自のオフセットを持つことができます。ただし、画像が読み込まれるまでテクスチャのクローンを作成しないでください。

この代替アプローチでは、UV を調整する必要はなく、イメージを複数回ロードする必要もありません。

three.js r.58

于 2013-06-07T14:02:20.237 に答える