three.jsでディスプレースメントマップを繰り返す方法

Question

three.jsレンダリングでは、私は複数回繰り返したい小さなテクスチャを持っています。このテクスチャには、マップ、変位マップ、法線マップ、アンビエントオクルージョンマップ、および鏡面マップがあります。繰返しパターンがx方向に1、y方向に1である限り、イメージは期待通りに見えます。予想通りに変位がある。

リピート値が1より大きい場合は、すべてのマップは、ディスプレイスメントマップを除いて正しくスケールするように見えます。ディスプレースメントマップは繰り返されていないようです。置き換えは前の画像で示したものと同じです。

プレーンにこれらのマップを適用するためのコードスニペットは、次の変位マップと同じ繰り返されるように、このスニペットを修正することができる方法

/////////////////////////////////////////////// 
 
// add texture plane for a test 
 

 
xRep = 1; 
 
yRep = 1; 
 

 
var loader = new THREE.TextureLoader(); 
 
var tex = loader.load('images/img.png'); 
 
tex.wrapS = tex.wrapT = THREE.RepeatWrapping; 
 
tex.repeat.set(xRep, yRep); 
 

 
var nloader = new THREE.TextureLoader(); 
 
var ntex = loader.load('images/img-normal.png'); 
 
ntex.wrapS = ntex.wrapT = THREE.RepeatWrapping; 
 
ntex.repeat.set(xRep, yRep); 
 

 
var aloader = new THREE.TextureLoader(); 
 
var atex = aloader.load('images/img-ao.png'); 
 
atex.wrapS = atex.wrapT = THREE.RepeatWrapping; 
 
atex.repeat.set(xRep, yRep); 
 

 
var dloader = new THREE.TextureLoader(); 
 
var dtex = dloader.load('images/img-v003-disp.png'); 
 
dtex.wrapS = dtex.wrapT = THREE.RepeatWrapping; 
 
dtex.repeat.set(xRep, yRep); 
 

 
var sloader = new THREE.TextureLoader(); 
 
var stex = sloader.load('images/img-v003-spec.png'); 
 
stex.wrapS = stex.wrapT = THREE.RepeatWrapping; 
 
stex.repeat.set(xRep, yRep); 
 

 
var faceMaterial = new THREE.MeshPhongMaterial({ 
 
\t \t \t color: 0xa0a0a0, 
 
\t \t \t shininess: 30, 
 
\t \t \t //map    : tex, 
 
\t \t \t //bumpMap   : tex, 
 
\t \t \t //bumpScale   : 1, 
 
\t \t \t displacementMap: dtex, 
 
\t \t \t displacementScale: 10, 
 
\t \t \t normalMap: ntex, 
 
\t \t \t //normalScale  : (1,1), 
 
\t \t \t aoMap: atex, 
 
\t \t \t //aoMapIntensity : 1, 
 
\t \t \t specularMap: stex 
 
\t \t \t  //_last: 0 
 
\t \t \t }); 
 

 
face = new THREE.Mesh(new THREE.PlaneGeometry(50, 50, 256, 256), 
 
\t \t \t faceMaterial); 
 
\t \t \t face.position.z = 50; 
 
\t \t \t face.receiveShadow = true; 
 
\t \t \t face.castShadow = true; 
 

 
scene.add(face);

他のマップ？

注：この問題はGit hubのissue #7826のディスカッションに関連しているようです。

Answer 1

ディスプレースメントマップを繰り返すが、ディスプレースメントマップは現在のバージョンのthree.jsのオフセットリピート値を尊重しない。

回避策は、ジオメトリのUVを変更することです。

ディスプレイスメントマップを3回繰り返したいとします。その後、PlaneBufferGeometryを使用して3

してUVを掛け、そうするように、このパターンに従ってください：他のテクスチャの

var uvs = geometry.attributes.uv.array; 

for (var i = 0; i < uvs.length; i ++) uvs[ i ] *= 3; 

をあなたがしたい場合、あなたはそれに応じてrepeat値をスケーリングすることで補うことができます：

あなたは少なくとも1回レンダリング後のバッファジオメトリUVを変更する場合

texture.repeat.set(1/3, 1/3); 

、あなたが設定する必要があります。

mesh.geometry.attributes.uv.needsUpdate = true; 

また、this postも必ずお読みください。

three.js r.79