Как повторить текстуры без растяжения в Three.js?

Question

Независимо от того, что я делаю, мои текстуры, кажется, растягиваются/масштабируются до размера сетки, к которой я их применяю. Я прочитал много ответов на этот вопрос, ни одно из решений, похоже, не фиксировало меня, поэтому я отправляю новый. Просто немного информации,

• Мои текстур все 64x64 пикселей
• Я поджимать все мои текстуры
• Я использую Web GL рендерер

Вот мой код

makeTestObject:function() 
{ 
    var scope = this, 
     tileGeometry = new THREE.BoxGeometry(TILE_SIZE , TILE_HEIGHT , TILE_SIZE), 
     texture = new THREE.Texture(preloadedImageObject), 
     textureMaterial = new THREE.MeshLambertMaterial({map:texture}), 
     tile = new THREE.Mesh(tileGeometry , new THREE.MeshFaceMaterial(
     [ 
      textureMaterial, // +x 
      textureMaterial, // -x 
      textureMaterial, // +y 
      textureMaterial, // -y 
      textureMaterial, // +z 
      textureMaterial // -z 
     ])); 

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

    tile.position.y = BASE_HEIGHT * 2; 
    tile.castShadow = true; 
    tile.receiveShadow = true; 
    texture.needsUpdate = true; 
    scope.scene.add(tile); 
} 

Если я делаю texture.repeat.set(x , x) и устанавливаю x на любую величину, текстура просто кажется исчезнуть, и я остался с плоским цветом.

Любая идея, что я делаю неправильно?

Answer 1

Хорошо, поэтому для стандартной геометрии коробки (квадратной или прямоугольной) это решение;

makeTestObject:function() 
{ 
    var scope = this, 
     tileGeometry = new THREE.BoxGeometry(TILE_SIZE , TILE_HEIGHT , TILE_SIZE), 
     texture = new THREE.Texture(preloadedImageObject), 
     textureMaterial = new THREE.MeshLambertMaterial({map:texture}), 
     tile = new THREE.Mesh(tileGeometry , new THREE.MeshFaceMaterial(
     [ 
      textureMaterial, // +x 
      textureMaterial, // -x 
      textureMaterial, // +y 
      textureMaterial, // -y 
      textureMaterial, // +z 
      textureMaterial // -z 
     ])); 

    texture.wrapS = THREE.RepeatWrapping; 
    texture.wrapT = THREE.RepeatWrapping; 
    tile.geometry.computeBoundingBox(); 

    var max = tile.geometry.boundingBox.max; 
    var min = tile.geometry.boundingBox.min; 
    var height = max.y - min.y; 
    var width = max.x - min.x; 

    texture.repeat.set(width/TEXTURE_SIZE , height/TEXTURE_SIZE); 

    texture.needsUpdate = true; 
    scope.scene.add(tile); 
} 

Ключ правильно устанавливает отношения для повторения текстуры. Вы также можете создать новый материал для каждого лица, а не ссылаться на один и тот же материальный объект снова и снова.