Question

我正在使用圆角矩形THREE.Shape创建圆角顶点多米诺，然后通过THREE.ExtrudeGeometry进行拉伸。然后，我从图像（矩形砖墙）加载纹理，并将其应用于该几何图形的正面。我原本希望墙适合我的圆角矩形的表面，但是我得到的是下图的结果： Texture mapping issue

是THREEJS错误还是我错过了什么？在此先感谢您的帮助！下面是我使用的代码：

//add tile
var tile_size = 2;
var roundedRectShape = new THREE.Shape();
  ( function roundedRect( ctx, x, y, width, height, radius ) {
    ctx.moveTo( x, y + radius );
    ctx.lineTo( x, y + height - radius );
    ctx.quadraticCurveTo( x, y + height, x + radius, y + height );
    ctx.lineTo( x + width - radius, y + height );
    ctx.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
    ctx.lineTo( x + width, y + radius );
    ctx.quadraticCurveTo( x + width, y, x + width - radius, y );
    ctx.lineTo( x + radius, y );
    ctx.quadraticCurveTo( x, y, x, y + radius );
  } )( roundedRectShape, 0, 0, 1.5*tile_size, 1.7*tile_size, 0.1 );
var extrudeSettings = {
  steps: 3,
  depth: 0.1*tile_size,
  bevelEnabled: true,
  bevelThickness: 0.05,
  bevelSize: 0.05,
  bevelSegments: 3
};
var geometry = new THREE.ExtrudeGeometry( roundedRectShape, extrudeSettings );
  var texture = new THREE.TextureLoader().load( "content/wall.jpg" );

  var materialFace = new THREE.MeshLambertMaterial({
      map: texture
  });
  var materialSide = new THREE.MeshLambertMaterial({
      color: '#EEEBDC'
  });
  var materials = [materialFace, materialSide];

tile = new THREE.Mesh(geometry, materials);
tile.rotation.x = - Math.PI/2;
tile.position.z = -1;
tile.position.x = -0.5*tile_size/2;
tile.position.y = -0.2*tile_size;

all.add( tile );

Answer 1

UV贴图时，应将值保持在0到1的范围内。ExtrudeGeometry根据顶点位置分配UV。因此，如果在[4, 3, -2]处有一个顶点，则其对应的UV值将为[4, 3]。超过1的任何值都会“拉伸”（或重复，具体取决于您的纹理参数）。

您可以：

尝试将tileSize绘制在[0, 1]范围之间的某个位置，以使UV映射适合所需的范围。然后，您可以使用tile.scale.set(2.0, 2.0, 2.0)

或

您可以使用texture.wrapS = texture.wrapT = THREE.RepeatWrapping使纹理无限重复。您可以在texture constants page

加载了THREE.TextureLoader（）的纹理未很好地映射到THREE.ExtrudeGeometry几何上

1 个答案: