p5.js texture()用法及代碼示例

p5.js中的texture()函數用於為幾何對象提供紋理。該紋理可以是p5.Image，p5.MediaElement或p5.Graphics對象。

用法:

texture( tex )

參數：該函數接受如上所述和以下描述的單個參數。

tex:它是一個p5.Image，p5.MediaElement或p5.Graphics對象，該對象指定必須在模型上使用的2D紋理。

以下程序說明了p5.js中的texture()函數：

範例1：

let cubeObj; 
let newFont; 
  
// Load all the models in preload() 
function preload() { 
  newFont = loadFont("fonts/Montserrat.otf"); 
  cubeObj = loadModel("models/cube.obj", true); 
  
  textureImg = loadImage("blue_texture.jpg"); 
} 
  
function setup() { 
  createCanvas(400, 300, WEBGL); 
  textFont(newFont, 14); 
} 
  
function draw() { 
  background("green"); 
  text("The model below is using an"+ 
       " image texture", -185, -125); 
  
  scale(0.60); 
  lights(); 
  rotateX(frameCount * 0.005); 
  rotateY(frameCount * 0.005); 
  noStroke(); 
  
  texture(textureImg); 
  
  // Load the given model 
  model(cubeObj); 
}

輸出：

image-texture

範例2：

let newFont; 
let newTexture; 
  
function preload() { 
  newFont = loadFont("fonts/Montserrat.otf"); 
} 
  
function setup() { 
  createCanvas(400, 300, WEBGL); 
  textFont(newFont, 14); 
  
  newTexture = createGraphics(400, 200); 
  newTexture.textSize(75); 
} 
  
function draw() { 
  background("green"); 
  text("Use the dropdown to select the"+ 
       " model to display", -185, -125); 
  
  newTexture.background("yellow"); 
  newTexture.text("Hello World!", 0, 100); 
  
  // Use the created texture 
  texture(newTexture); 
  rotateX(frameCount * 0.01); 
  rotateY(frameCount * 0.01); 
    
  box(100); 
}

輸出：

image-textImage

參考： https://p5js.org/reference/#/p5/texture

在線編輯： https://editor.p5js.org/

環境設置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

參考： https://p5js.org/reference/#/p5/rectMode

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 p5.js | texture() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。