私はthree.jsを使って家を建てています。壁と壁のテクスチャがあります。
壁は基本的に CubeGeometry です。
私はユニークなスケールを取りました: 1cm = 1px
テクスチャはレンガやその他の建設資材である可能性がありますが、テクスチャ ファイルは常に 512x512 で、詳細が含まれています。例: テクスチャ ファイル内の 1 つのレンガは、4 ピクセルあたり 10 ピクセルになります。
シーンのリアリティを維持するには、この比率を維持する必要があります。
var texture = THREE.ImageUtils.loadTexture("images/wall.jpg");
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat = new THREE.Vector2(0.2 , 0.2);
var wall = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 10), new THREE.MeshBasicMaterial({ map: texture }));
ケースがシンプルなので、これは非常にうまく機能します;)、すべての壁の比率を作成するのも非常に簡単です(あらゆる種類のサイズを持つことができます)
しかし、実際には他のジオメトリ (手続き的に生成されたものなど) がたくさんありますが、「THREE.KeepMyTextureSizeAndRepeat」ラッピングのようなプロパティはありますか? または、カスタム ジオメトリごとに比率を作成する必要がありますか?
このユースケースについて何かアドバイスがあれば、私は素晴らしいです:)
どうもありがとう
EDIT:最終的な目標は、2Dキャンバスで「パターン」のようなことをすることです
var pattern = context.createPattern(imageObj, repeatOption);
context.fillStyle = pattern;
context.fill();
そのようなことをすると、たとえば四角形では、アスペクト比を維持しながらパターンが繰り返されます(例: http://www.html5canvastutorials.com/tutorials/html5-canvas-patterns-tutorial/)