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

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）的图像; > no straptioning

带有 offsetText1 = vec2（0.1,0.1）的图像图像从右上角伸展。 拉伸

Answer 1

那就是纹理的行为。它们扩展到 [0，1] 的范围，因此，当您超过1或以下时，它们将“包装”。您需要告诉它在包装时该怎么办。您要它重复，伸展还是镜子？

您可以使用 texture.traps .wratp

THREE.RepeatWrapping
THREE.ClampToEdgeWrapping
THREE.MirroredRepeatWrapping

/code>和 在您的着色器代码中。这是一些伪代码：

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