Как повторить карту смещения в three.js

Question

В рендеринге three.js у меня есть небольшая текстура, которую я хочу повторить несколько раз. Для этой текстуры есть карта, карта смещения, нормальная карта, карта окклюзии окружающего мира и зеркальная карта. Пока повторяющийся шаблон равен 1 в x и 1 в направлении y, изображение выглядит так, как ожидалось. Ожидается смещение.

Если значения повтора больше 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);

Как этот фрагмент можно модифицировать таким образом, перемещение карты повторяется то же самое, другие карты?

Примечание: Эта проблема, как представляется, связана с обсуждением на issue #7826 на концентраторе Git.

Answer 1

Вы хотите, чтобы ваша карта смещения повторялась, но карта смещения не соблюдает значение повторения смещения в текущей версии three.js.

Обход - это изменение УФ-из вашей геометрии.

Предположим, вы хотите, чтобы карта смещения повторялась 3 раза. Затем умножить свои UVs на 3.

Использование PlaneBufferGeometry, следовать этому образцу, чтобы сделать так:

var uvs = geometry.attributes.uv.array; 

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

Для других текстур, если вы хотите, вы могли бы компенсировать путем масштабирования их repeat значения соответственно:

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

Если вы изменяете геометрию буфера UVs после рендеринга, по крайней мере один раз, вам нужно будет установить:

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

Также не забудьте прочитать this post.

Three.js R.79