javascript - Three.js:如何缩放和偏移我的图像纹理？

Question

如何缩放和偏移我的图像纹理？

我的图片尺寸是 1024px x 1024px。

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

Answer 1

看看the texture documentation :

.repeat - 在 U 和 V 的每个方向上，纹理在表面上重复了多少次。

.offset - 在 U 和 V 的每个方向上，纹理的单个重复从开始偏移多少。典型范围是 0.0 到 1.0。

.wrapS - 默认值为 THREE.ClampToEdgeWrapping，其中边缘被夹紧到外边缘纹素。其他两个选择是 THREE.RepeatWrapping 和 THREE.MirroredRepeatWrapping。

.wrapT - 默认值为 THREE.ClampToEdgeWrapping，其中边缘被夹紧到外边缘纹素。其他两个选择是 THREE.RepeatWrapping 和 THREE.MirroredRepeatWrapping。

注意:仅当图像尺寸为 2 的幂(2、4、8、16、32、64、128、256、512、1024、2048、.. ..) 以像素为单位。各个维度不必相等，但每个维度都必须是 2 的幂。这是 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);