Текстура, загруженная с помощью THREE.TextureLoader (), плохо отображается в геометрии THREE.ExtrudeGeometry - PullRequest
Новая
       66

Текстура, загруженная с помощью THREE.TextureLoader (), плохо отображается в геометрии THREE.ExtrudeGeometry

0 голосов
/ 06 декабря 2018

Я создаю домино с закругленными вершинами, используя прямоугольник с закругленными углами THREE.Shape, затем вытягиваем через THREE.ExtrudeGeometry.Затем я загружаю текстуру из изображения (прямоугольную кирпичную стену) и применяю ее к лицевой поверхности этой геометрии.Я ожидал, что стена будет соответствовать краю моего прямоугольника с закругленными углами, но вместо этого я получаю результат, показанный ниже: Проблема с наложением текстур

Это ошибка ТРИЙСИ или я что-то упустил?Заранее большое спасибо за вашу помощь!Ниже приведен код, который я использовал: 

//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 );

1 Ответ

0 голосов
/ 07 декабря 2018

При отображении UV, вы должны держать свои значения в диапазоне от 0 до 1. ExtrudeGeometry назначает UV в зависимости от положения вершин.Таким образом, если у вас есть вершина в [4, 3, -2], ее соответствующее значение UV будет [4, 3].Все, что больше 1, будет «растягиваться» (или повторяться, в зависимости от параметров вашей текстуры).

Вы можете либо:

  1. Попробуйте нарисовать где-нибудь tileSizeв диапазоне [0, 1], чтобы ваше УФ-отображение соответствовало желаемому диапазону.Затем вы можете масштабировать всю ячейку тайла с помощью tile.scale.set(2.0, 2.0, 2.0)

или

Вы можете заставить вашу текстуру повторяться бесконечно с texture.wrapS = texture.wrapT = THREE.RepeatWrapping.Вы можете увидеть альтернативные режимы обтекания на странице текстурных констант
...