How can i color or texture each faces of a loaded .obj file?

p5.js Coding Questions
1

I’m doing a 3D object texturing and coloring website. (For example a kitchen set. I want to change color or texture the kitchen cupboards, marble and fridge.) I’m loading the 3d kitchen set model on website. Customer should be able to see in any color and pattern of each faces. How can i color and texture the each faces of a loaded object?

I’m loading the 3D objects (.obj) with loadModel in p5js. I tried MeshFaceMaterial and get the geometry values of .obj file but i couldn’t do it.

This is my load codes

let angle = 0;
let cat;
let myModel;
function preload() {
  cat = loadImage('cats/cat2.jpg');
  myModel = loadModel('OBJ.obj');
}

function setup() {
  createCanvas(window.innerWidth, window.innerHeight, WEBGL);
}

function draw() {
  background(0);
  rotateX(angle);
  rotateY(angle);
  rotateZ(angle);
  translate(0, 0, 0);//mouseX
  //texture(cat);
  model(myModel);
  angle += 0.01;
}
2

I came across this:

I have not worked with this but it did spark my interest.

:slight_smile:

1 Like