Three.js Текстурное заполнение
 

Здравствуйте.

Пробовал накладывать текстуры на плоскость, но текстура накладывалась только на часть области в левый нижний угол а на остальную плоскость по осям x/y растягивался шлейф от текстуры. Всё делал по гайду ctr+c/ctrl+v.

Изображение размером 512х512px.

Может кто-то знает в чём может быть проблема?

>> в чём может быть проблема?
Во всем.

В твоем сообщении почти нету информации которая может помочь с твоей проблемой. Информация есть только про tree js и то что есть попытка работать с текстурой.

Если в двух словах то для того что бы OpenGL/Three.js отрисовал геометрию с текстурой необходимо
1. Задать параметры отрисовки OpenGL
2. Загрузить текстуру в текстурный регистр
3. Загрузить массив полигонов геометрии (массив x,y,z в трехмерном пространстве)
4. Загрузить массив текстурных координат (массив x,y в экранных координатах)
5. Вызвать отрисовку геометрии.

В твоем случае похоже массива текстурных координат нету либо в нем находится мусор.

Я же говорю, всё стандартно по гайду делаю, вот код добавления текстуры. Ничего сверхестественного, обычные азы.

let texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );

Дальше передача в map...

let material = new THREE.MeshBasicMaterial( { map: texture, side: THREE.DoubleSide } )

Передача материала плоскости и т.д. и т.п.

>> Ничего сверхестественного, обычные азы.
Ну тогда бери самый обычный совет и применяй его.

>> Я же говорю, всё стандартно ...
Что за стандарт приведи ссылку на его RFC ну или любой другой документ стандартизации.

>> по гайду делаю,
по какому?

Книга, немного устаревшая, но по спецификации некоторые места просто обновляются. https://moodle.znu.edu.ua/pluginfile...а%20WebGL.pdf

Гайд по выводу текстуры:
https://documentation.help/three.js-ru/textures.htm
Или официальная спецификация:
https://threejs.org/docs/#api/en/textures/Texture

Продолжение кода:

let geometry = new THREE.PlaneGeometry(300, 300, 1, 1);
  let checkerboard = new THREE.Mesh(geometry, material)
  checkerboard.position.y = -1
  checkerboard.position.x = Math.PI / 2

  scene.add( checkerboard );

Закомментируй строчку "texture.repeat.set( 4, 4 );"

А смысл? Просто картинка растягивается на весь объект. Я то хочу сделать повторение этой картинки на всём объекте. Но он по какой-то причине не хочет повторяться. Честно говоря думаю, может там нужны какие-то дополнительные настройки?

А смысал описан в документации метода repeat объекта texture

Ииии? Какой смысл мне ставить текстуру без повторения если у меня проблема как раз в том чтобы поставить её с повторением? Repeat для того и нужен чтоб продублировать текстуру указанное количество раз на поверхности фигуры. Я и пытаюсь это сделать, но вместо заполнения фигуры одной текстурой сеткой 4х4 у меня текстура отображается снизу слева на фигуре (в моём случае плоскость) и тянется шлейф от текстуры по осям X и Y, остальной пространство закрашено в преобладающий цвет на картинке текстуры.

>> Какой смысл мне ставить текстуру без повторения ...
Это ложное или ошибочное утверждение.

Назначение этих строк тоже описано в документации.
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

Следует обратить внимание на константу THREE.RepeatWrapping