p5.js textureMode() 方法

textureMode()方法是p5.js中的一个函数，它定义了纹理的坐标模式。纹理通常用于填充图形或3D对象的表面，可以是一张图片或其他图案。

语法

textureMode(mode: number)

• mode: 指定纹理坐标的模式，有两种可选，默认值为 IMAGE。
  • IMAGE：纹理坐标范围从0到1，对应于载入纹理图像的像素范围。
  • NORMAL：纹理坐标范围从-1到1，对应于填充当前形状的区域。

示例

以下示例说明了如何使用textureMode()方法。

假如你有一张名称为img.jpg的图片文件，并且想要将其应用到一个椭圆形状中。假设使用texture()函数将图片应用到椭圆上。

let img;

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

function setup() {
  createCanvas(400, 400, WEBGL);
  textureMode(NORMAL); // 设置纹理模式
  texture(img); // 应用图片纹理
  ellipse(0, 0, 200, 100); // 绘制椭圆
}

在这个例子中，我们定义了一个绘图设备，使用了WEBGL模式。我们还通过调用preload()方法来加载图片资源，并将其保存在img变量中。

在setup()方法中，我们调用textureMode(NORMAL)方法来设置纹理坐标的模式为NORMAL。我们还调用texture(img)方法将图像纹理应用到我们的形状上。

最后，我们使用ellipse()方法绘制了一个椭圆形状，其参数为 (0, 0, 200, 100)，分别对应于椭圆的中心坐标和水平、垂直半径。texture()方法的调用将图片纹理应用到该椭圆中。

结果，所绘制的椭圆将会带有图像纹理，如下图所示。