javascript Three.js：如何缩放和偏移我的图像纹理？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33803280/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Three.js: How do I scaling and offset my image textures?
提问by Arthur S.
How do I scaling and offset my image textures?
如何缩放和偏移图像纹理？
My image dimensions is 1024px x 1024px.
我的图片尺寸是 1024px x 1024px。
var textureMap = THREE.ImageUtils.loadTexture( 'texture.png' );
回答by kaigorodov
Have a look at [this documentation][https://threejs.org/docs/#api/en/textures/Texture]:
看看 [本文档][ https://threejs.org/docs/#api/en/textures/Texture]：
.repeat- How many times the texture is repeated across the surface, in each direction U and V.
.repeat- 纹理在表面上在每个方向 U 和 V 上重复的次数。
.offset- How much a single repetition of the texture is offset from the beginning, in each direction U and V. Typical range is 0.0 to 1.0.
.offset- 在每个方向 U 和 V 上，纹理的单个重复从开始偏移的程度。典型范围是 0.0 到 1.0。
.wrapS- The default is THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge texels. The other two choices are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.
.wrapS- 默认为 THREE.ClampToEdgeWrapping，其中边缘被夹在外边缘纹素上。另外两个选择是 THREE.RepeatWrapping 和 THREE.MirroredRepeatWrapping。
.wrapT- The default is THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge texels. The other two choices are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.
.wrapT- 默认为 THREE.ClampToEdgeWrapping，其中边缘被夹在外边缘纹素上。另外两个选择是 THREE.RepeatWrapping 和 THREE.MirroredRepeatWrapping。
NOTE:tiling of images in textures only functions if image dimensions are powers of two (2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, ...) in terms of pixels. Individual dimensions need not be equal, but each must be a power of two. This is a limitation of WebGL, not Three.js.
注意：纹理中的图像平铺仅在图像尺寸是像素的 2 的幂（2、4、8、16、32、64、128、256、512、1024、2048 等）时才起作用。单个维度不必相等，但每个维度必须是 2 的幂。这是 WebGL 的限制，而不是 Three.js。
Example of scale:
规模示例：
// 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);
回答by Ben
Offset with texture.offset.set(u, v);where uand vare percents (e.g. 0.67).
用texture.offset.set(u, v);whereu和vare 百分比偏移（例如 0.67）。
There's not a specific scalemethod, but it's basically the arguments to .repeat(): texture.repeat.set(countU, countV). Smaller numbers will scale bigger: consider fitting 2 vs fitting 20 across the same axis.
没有特定的scale方法，但基本上是.repeat():的参数texture.repeat.set(countU, countV)。较小的数字会放大：考虑在同一轴上拟合 2 与拟合 20。
