Выравнивание материала на три .js на сцене

Question

У меня есть большой материал (размер 10x10 на блендере) и 10 других материалов размером 1x1.

Итак, я помещаю каждый маленький материал по оси X на большой материал. (x = -5, -4, -3 и т. д. x = 5).

Проблема заключается в том, что малые материалы не идеально выровнены на большом.

С левой стороны маленький материал сдвигается по правому краю, а справа справа маленький материал сдвигается слева. В центре (например, x = 0) два материала идеально выровнены.

Большой материал имеет текстуру изображения размером 1000х1000. Я попытался уменьшить его до 250x250, но это все та же проблема.

Что может быть неправильным? Обертывание текстуры? Растяжка?

Вот код, чтобы создать большой материал, модель и текстуры:

var hugeTexture = THREE.ImageUtils.loadTexture('hugeTexture.png'), 
     hugeMaterial = new THREE.MeshPhongMaterial({ map: hugeTexture }); 

     JSONloader.load('hugeMaterial.js', function (geometry) { 
      var hugeModel = new THREE.Mesh(geometry, hugeMaterial); 

      hugeModel.receiveShadow = true; 

      scene.add(hugeModel); 
     }); 

Мелкие материалы являются BoxGeometry без текстуры, а просто цвет

Answer 1

Вы, возможно, придется использовать изображения в силе 2 размера. 256x256 512x512 1024x1024 и т. Д.