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

Question

Как масштабировать и компенсировать текстуры изображений?

Размеры моего изображения 1024px x 1024px.

var textureMap = THREE.ImageUtils.loadTexture('texture.png'); 

Answer 1

Посмотрите this documentation:

.repeat - Сколько раз текстура повторяется по всей поверхности, в каждом направлении U и V.

.offset - Сколько единственного повторения текстуры смещено от начала, в каждом направлении U и V. Типичный диапазон от 0.0 до 1. 0.

.wrapS - По умолчанию THREE.ClampToEdgeWrapping, где край зажимается к внешним краям texels. Остальные два варианта: THREE.RepeatWrapping и THREE.MirroredRepeatWrapping.

.wrapT - По умолчанию THREE.ClampToEdgeWrapping, где край зажимается к внешним краям texels. Остальные два варианта: THREE.RepeatWrapping и THREE.MirroredRepeatWrapping.

Примечание: плиточных изображений в текстурах только функции, если размеры изображения являются степенями два (2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, ...) в терминов пикселей. Отдельные размеры не обязательно должны быть равны, но каждая из них должна быть равна двум. Это ограничение WebGL, а не Three.js.

Пример шкалы:

// scale x2 horizontal 
texture.repeat.set(0.5, 1); 
// scale x2 vertical 
texture.repeat.set(1, 0.5); 
// scale x2 proportional 
texture.repeat.set(0.5, 0.5);