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

Question

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

我的图片尺寸为1024px x 1024px.

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

Answer 1

看看这个文档:

.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);

Answer 2

texture.offset.set(u, v);其中u和是百分比的偏移量v（例如 0.67）。

没有特定的方法，但它基本上是:scale的参数。较小的数字会缩放得较大：考虑在同一轴上拟合 2 与拟合 20。.repeat()texture.repeat.set(countU, countV)