2

2D キャンバス要素でテクスチャリングした平面ジオメトリを持つメッシュがあります。これは完全に機能しています。

var landTexture = new THREE.Texture(land.canvas);  // animated canvas element
var material = new THREE.MeshLambertMaterial({map: landTexture});
var plane = new THREE.Mesh( new THREE.PlaneGeometry( this.land_width, this.land_height ), material );
landTexture.needsUpdate = true;
landObject.add(plane);

2D キャンバスには、平面ではなく五角形のテクスチャとして使用したいアニメーション パターンがあります。より複雑なポリゴン (五角形など) を 2D キャンバス テクスチャでテクスチャリングするにはどうすればよいですか?

編集：五角形を生成する方法

var pentagon = new THREE.Mesh( new THREE.CircleGeometry(this.land_width, 5), material );

PlaneGeometry 上のアニメーション化されたテクスチャと、5 つの側面を持つ CircleGeometry 上の同じテクスチャのスクリーンショット。五角形の「引き伸ばされた」キャンバス テクスチャに注目してください。これは、私が望んでいるものではありません。比例して収まる必要があります。

引き伸ばされたキャンバス テクスチャの例

4

1 に答える 1

1

次のようなコードができるように、UV は既に設定されていると思います。

var grid = new THREE.ImageUtils.loadTexture( 'images/uvgrid01.jpg' );
var pentagon = new THREE.Mesh( new THREE.CircleGeometry(50, 5), new THREE.MeshBasicMaterial({map:grid}) );

グリッドが画像の場合:

ここに画像の説明を入力

次のような画像が生成されます。

ここに画像の説明を入力

それはあなたが探しているものですか？あとはテクスチャを繰り返し更新するだけで、そのたびにフラグを設定してマテリアルを更新します。もっと詳しく説明できますが、キャンバスがどのようにアニメーション化されているかを知る必要があります。

于 2013-09-03T21:27:08.083 に答える