Three.js：如何缩放和偏移我的图像纹理？ [英] Three.js: How do I scaling and offset my image textures?

问题描述

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

How do I scaling and offset my image textures?

我的图像尺寸为1024px x 1024px。

My image dimensions is 1024px x 1024px.

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

推荐答案

查看此文档：

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

.repeat - How many times the texture is repeated across the surface, in each direction U and V.

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

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

.wrapS - 默认为THREE.ClampToEdgeWrapping，其中边缘被夹在外边缘纹素上。另外两个选择是THREE.RepeatWrapping和THREE.MirroredRepeatWrapping。

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

.wrapT - 默认为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.

注意：纹理中图像的平铺仅在图像尺寸为就像素而言，两个（2,4,8,16,32,64,128,256,512,1024,2048，......）。个别维度不必相等，但每个维度必须是2的幂。这是WebGL的限制，而不是Three.js.

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.

比例示例：

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

这篇关于Three.js：如何缩放和偏移我的图像纹理？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！