p5.js textureWrap() 方法

p5.js 中的textureWrap()函数用于设置全局纹理环绕模式。它可用于设置纹理超出其正常范围时的行为。它具有三种模式：

• 夹子 mode 使纹理边缘的像素扩展到其极限。这是默认行为。
• 重复 模式导致纹理重复平铺，直到达到限制。
• 镜子 模式与 REPEAT 类似，但它会反转每个新图块上的纹理。

REPEAT 和 MIRROR 仅在纹理大小是 2 的幂时才起作用。更改将在下一次调用该函数之前生效。

句法：

textureWrap(wrapX, [wrapY])

参数：该函数接受上面提到的两个参数，如下所述：

• wrapX：这是一个常数，用于设置纹理在 x 方向上的环绕模式。它可以具有 CLAMP、REPEAT 或 MIRROR 值。默认为 CLAMP 模式。
• wrapY：这是一个常量，用于设置纹理在 y 方向上的环绕模式。它可以具有 CLAMP、REPEAT 或 MIRROR 值。它是一个可选参数。

下面的例子说明了 p5.js 中的textureWrap()函数：

示例 1：使用 CLAMP 纹理包装的模式。

Javascript

let img;
  
function preload() {
  img = loadImage('images/gfg.jpg');
}
  
function setup() {
  createCanvas(300, 300, WEBGL);
    
  // Set the texture wrapping mode
  // to CLAMP
  textureWrap(CLAMP);
}
  
function draw() {
  background(0);
  
  let dX = mouseX;
  let dY = mouseY;
  
  let u = lerp(1.0, 2.0, dX);
  let v = lerp(1.0, 2.0, dY);
  
  scale(width / 2);
  
  texture(img);
  
  beginShape();
  vertex(-1, -1, 0, 0, 0);
  vertex(1, -1, 0, u, 0);
  vertex(1, 1, 0, u, v);
  
  vertex(1, 1, 0, u, v);
  vertex(-1, 1, 0, 0, v);
  vertex(-1, -1, 0, 0, 0);
    
  endShape();
}

输出：

示例 2：使用镜子 纹理包装的模式。

Javascript

let img;
function preload() {
  img = loadImage('images/gfg.jpg');
}
  
function setup() {
  createCanvas(300, 300, WEBGL);
    
  // Set the texture wrapping mode
  // to MIRROR
  textureWrap(MIRROR);
}
  
function draw() {
  background(0);
  
  let dX = mouseX;
  let dY = mouseY;
  
  let u = lerp(1.0, 2.0, dX);
  let v = lerp(1.0, 2.0, dY);
  
  scale(width / 2);
  
  texture(img);
  
  beginShape();
  vertex(-1, -1, 0, 0, 0);
  vertex(1, -1, 0, u, 0);
  vertex(1, 1, 0, u, v);
  
  vertex(1, 1, 0, u, v);
  vertex(-1, 1, 0, 0, v);
  vertex(-1, -1, 0, 0, 0);
    
  endShape();
}

输出：

示例 3：使用 REPEAT 纹理包装的模式。

Javascript

let img;
function preload() {
  img = loadImage('images/gfg.jpg');
}
  
function setup() {
  createCanvas(300, 300, WEBGL);
    
  // Set the texture wrapping mode
  // to REPEAT
  textureWrap(REPEAT);
}
  
function draw() {
  background(0);
  
  let dX = mouseX;
  let dY = mouseY;
  
  let u = lerp(1.0, 2.0, dX);
  let v = lerp(1.0, 2.0, dY);
  
  scale(width / 2);
  
  texture(img);
  
  beginShape();
  vertex(-1, -1, 0, 0, 0);
  vertex(1, -1, 0, u, 0);
  vertex(1, 1, 0, u, v);
  
  vertex(1, 1, 0, u, v);
  vertex(-1, 1, 0, 0, v);
  vertex(-1, -1, 0, 0, 0);
    
  endShape();
}

输出：

参考： https://p5js.org/reference/#/p5/textureWrap