如何将纹理放置在特定位置？

Question

在我的代码中，我混合了两种纹理。 我想在平面上的任何位置放置纹理，但是当我向纹理 UV XY 坐标添加偏移时，图像只会被拉伸。

offsetText1 = vec2(0.1,0.1);       
vec4 displacement  = texture2D(utexture1,vUv+offsetText1);

如何在不拉伸的情况下将纹理移动到任何位置？

顶点着色器：

  
  varying vec2 vUv;
  uniform sampler2D utexture1;
  uniform sampler2D utexture2;
  varying vec2 offsetText1;

  void main() {
      offsetText1 = vec2(0.1,0.1);
      vUv = uv;
      vec4 modelPosition = modelMatrix * vec4(position, 1.0);
      vec4 displacement  = texture2D(utexture1,vUv+offsetText1);
      vec4 displacement2 = texture2D(utexture2,vUv);
      modelPosition.z   += displacement.r*1.0;
      modelPosition.z   += displacement2.r*40.0;
      gl_Position       = projectionMatrix * viewMatrix * modelPosition;
  }
  

片段着色器：

  #ifdef GL_ES
  precision highp float;
  #endif
  uniform sampler2D utexture1;
  uniform sampler2D utexture2;
  varying vec2 vUv;
  varying vec2 offsetText1;

  void main() {
      vec3 c;
      vec4 Ca = texture2D(utexture1,vUv+offsetText1 );
      vec4 Cb = texture2D(utexture2,vUv);
      c       = Ca.rgb * Ca.a + Cb.rgb * Cb.a * (2.0 - Ca.a);
      gl_FragColor = vec4(c, 1.0);
  }
  

带有offsetText1 = vec2(0.0,0.0); 没有拉伸

带有offsetText1 = vec2(0.1,0.1); 图像从右上角被拉伸。 拉伸

Answer 1

这就是纹理的行为。 它们在[0, 1]的范围内扩展，因此当您超过 1 或低于 0 时，它们将“换行”。 您需要告诉它在包装时要做什么。 您希望它重复、拉伸还是镜像？

您可以使用texture.wrapS和.wrapT属性来建立它，它们接受 3 个值之一：

THREE.RepeatWrapping
THREE.ClampToEdgeWrapping
THREE.MirroredRepeatWrapping

如果您只想在纹理超出范围的地方显示白色，那么您必须在着色器代码中以编程方式执行此操作。 这是一些伪代码：

if (uv < 0 || > 1)
   color = white