現状

ExtrudeGeometryにTextureを適用したら、下記図のようにTextureの両端が引き伸ばされるような形で適用されてしまった。

Textureの変形方法

Repeat

textureのrepeatを利用して、リピート回数を指定することができる。
ただし、repeatの指定をするだけでは表示は変わらないため、下記をロードしたテクスチャに設定する必要がある。

texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.RepeatWrapping

ponta

上記スクラップにて、テクスチャを繰り返しすことでテクスチャの両端が引き伸ばされる問題は解決できた。

次に陥ったのは、geometryの境界が透明になってしまう問題だ。

適用しているテクスチャは下記５つである。

map
aoMap
displacementMap
normalMap
roughnessMap

displacementMapはmeshのvertexの位置に影響を与えるもので、この影響が大きすぎたため隙間ができてしまったようだった。
解決策としては、displacementScaleの値を小さくして、影響を小さくするように調整した。

displacementScale=0.05;

ponta

壁の面と裏で、別のテクスチャを適用する方法

material.mapにテクスチャを指定すると、Box全体が指定したテクスチャになる。
しかし、実際の壁を考えると外側と内側で壁紙が違うので各面で異なるテクスチャを貼りたい。

const geometry = new THREE.BoxGeometry(5, 5, 0.25);

  geometry.clearGroups(); // just in case
  geometry.addGroup(0, 18, 0); // first 18 vertices use material 0
  geometry.addGroup(24, 6, 1); // next 6 vertices use material 1
  geometry.addGroup(30, Infinity, 2); // remaining vertices use material 2

  const materials = [
    new THREE.MeshBasicMaterial({ color: 0xf8ddb7 }),
    new THREE.MeshBasicMaterial({ map: WallCOLORTexture }),
    new THREE.MeshBasicMaterial({ map: FloorCOLORTexture }),
  ];

Different wallpaper on each face of the cube - Questions - three.js forum

ponta

map
aoMap
displacementMap
normalMap
roughnessMap
を全てsRGBEncodingにすると、影が表示されなくなった。