3

three.js ShapeGeometry から作成されたメッシュにビットマップ テクスチャ マテリアルを配置しようとしています。

ジオメトリは単純な八角形です (最終的に曲線を追加して角の丸い長方形にします)。

メッシュが作成され、正常に表示されますが、ビットマップ テクスチャが 4 つの巨大な正方形として表示されます。これは、ロードされた画像の超大型の低解像度バージョンのようです。

外観は次のとおりです。http://imgur.com/KYFVGAn

(読み込まれた画像は、実際には 512x512 のフランス国旗の写真です)

読み込まれた画像のフル解像度を使用するテクスチャを取得するにはどうすればよいですか? (ちなみに、このテクスチャは、THREE.PlaneGeometry から作成されたメッシュにマテリアルとして適用するとうまく機能します。)

これが私のコードです...

var shape = new THREE.Shape();
shape.moveTo(-width/2 + radius, height/2);
shape.lineTo(width/2 - radius, height/2);
shape.lineTo(width/2, height/2 - radius);
shape.lineTo(width/2, -height/2 + radius);
shape.lineTo(width/2 - radius, -height/2);
shape.lineTo(-width/2 + radius, -height/2);
shape.lineTo(-width/2, -height/2 + radius);
shape.lineTo(-width/2, height/2 - radius);
shape.lineTo(-width/2 + radius, height/2);
var myGeometry = new THREE.ShapeGeometry( shape );

var myMesh = new THREE.Mesh(myGeometry, myMaterial);

ありがとう！！！

4

1 に答える 1

2

THREE.ExtrudeGeometry.WorldUVGeneratorのデフォルトの UV ジェネレータですTHREE.ShapeGeometry。

このデフォルトの UV ジェネレータは、頂点座標と等しくなるように UV を設定します。

独自の UV ジェネレータを に渡す必要がありますTHREE.ShapeGeometry。それがどのように機能するかについては、ソースコードを参照してください。

回避策は、モデル パラメータをたとえば 10 倍に拡大し、次に を設定して補正することですmesh.scale.set( 0.1, 0.1, 1 )。

3 番目のオプションは、頂点が [ 0, 1 ] の範囲をカバーするようにシェイプ ジオメトリを調整し、必要に応じて適用mesh.scaleすることです。

three.js r.61

于 2013-10-04T15:05:57.977 に答える