Mappature su oggetti 3D

// height=200 lines=auto
let texImage;  // immagine da mappare

function preload() {
    texImage = loadImage( "assets/texture.png" );
}

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

function draw() {
    background(200);
    ambientLight( 100,100,200 );
    pointLight( 96,212,96, -60,0,90 );

    texture( texImage );

    rotateX( frameCount/100 );
    cone( 40,120, 80,30 );
}
texImage = loadImage( "assets/texture.png" );

Carica l'immagine "texture.png" che si trova nella cartella parallela "assets" [vedi schema cartelle in basso] e salva tutte le informazioni nella "variabile" texImage (istanza della classe p5.Image).

texture( texImage );

Imposta l'immagine texImage come materiale da mappare sui solidi successivi.

Per vedere la texture usata, cliccare su "texture.png" nello schema che segue.


Strutturazione dei file:

  • CARTELLA-SKETCH
    • assets
    • libs
      • p5.min.js
    • index.html
    • sketch.js