P5.js texture()函数介绍

在P5.js中，texture()函数可以用于给物体或几何体添加纹理贴图，并可以通过纹理来美化图形。

语法

texture(img)

参数

• img: 要用作纹理的图片或P5.js图像对象。

示例

let img;

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

function setup() {
  createCanvas(500, 500, WEBGL);
}

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

• 函数preload()用于在setup()函数之前加载图片texture.jpg。
• 在setup()函数内创建500x500的3D画布。
• 在draw()函数内将背景设为灰色，将盒子按坐标系旋转，并通过texture()函数将img添加为盒子的纹理贴图。

效果

注意事项

• 纹理必须在setup()函数之前加载。
• 若使用本地图片文件作为纹理，则需要将WebGL模式改为本地模式，否则会遇到跨域访问的问题。

参考资料

• P5.js官方文档 - texture()函数