p5.js textureWrap() 方法

textureWrap() 是 p5.js 中的一个方法，它用于设置纹理的循环模式（即如何处理纹理坐标超出 0.0 至 1.0 范围的情况）。

语法

textureWrap(mode)

• mode：纹理循环模式。可选值为 REPEAT（默认值）或 CLAMP.

描述

textureWrap() 方法用于设置纹理的循环模式，它的作用是指定如果超出了纹理坐标的 0.0 至 1.0 的范围应该如何处理。

如果循环模式设置为 REPEAT，那么超出的部分会被无限循环重复。如果循环模式设置为 CLAMP，那么超出的部分会被拉伸到最近的纹理坐标。

示例

下面是一个简单的例子。它使用纹理从图片库中加载一张图片，并将其应用到矩形上。然后，通过按键将循环模式设置为 REPEAT 或 CLAMP。

let img;
let textureMode = 'REPEAT';

function preload() {
  img = loadImage('assets/texture.jpg');
}

function setup() {
  createCanvas(400, 400, WEBGL);
  texture(img);
}

function draw() {
  background(200);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(200, 200, 200);
}

function keyPressed() {
  if (keyCode === UP_ARROW) {
    textureMode = 'REPEAT';
    textureWrap(REPEAT);
  } else if (keyCode === DOWN_ARROW) {
    textureMode = 'CLAMP';
    textureWrap(CLAMP);
  }
  console.log('Texture mode: ' + textureMode);
}

在这个例子中，按向上箭头将循环模式设置为 REPEAT，按向下箭头将循环模式设置为 CLAMP。每当按下箭头时，它都会记录当前的纹理循环模式，并输出到控制台。

参考资料

• p5.js textureWrap()