P5.js button that displays a 3D model when touched

21 Views Asked by At

I'm a beginner. I want to program my button so that it will display my 3D model when the button is touched on the touchscreen. I want the model to stay on the screen even after the touch is not detected anymore. I have managed to create the button, upload the model, however, I am not sure how to proceed and just keep getting errors when I try.

let dress1;
let texture1;
let img1;

function preload(){
// 3D model files
 dress1 = loadModel('dress1.obj', true);
 texture1 = loadImage('texture1.jpg');
 img1 = loadImage('kmaclogo.png');
}


function setup() {
  
  // Image
  background(220);
  
// Page setup
createCanvas(windowWidth, windowHeight, WEBGL);
camera(70, -300, 700);

// Instructions text
let div = createDiv();
  // Placement on sketch
  div.position(10, 100);
  // Width and height setting
  div.size(400, 200);
  div.style('background-color', 'clear');
  div.style('text-align', 'justified');
  div.style('font-size', '20px');
  div.style('font-family', 'arial');
    let p = createP('Click on the buttons below to view the dresses.To rotate, swipe left or right. To zoom in or out, pinch in the direction you would like to go.');
    p.parent(div.elt);
    
// Button color setting
let bcol = color(246, 200, 100);
let pcol = color(200);


//dress button
let button = createButton('Gunnar Deatherage');
  button.style("font-family", "arial");
  button.style("font-size", "20px");
  button.style('background-color', bcol);
  button.position(20,500);
  //touchscreen
  button.touchStarted(() => {
    button.style('background-color', pcol);
  });
    button.touchEnded(() => {
    button.style('background-color', bcol);
  });

function draw(){

background(220);

  // Dress 1 
  push(); //start 3d obj
  noStroke();
  scale (-3, 3, 3); //scale up size
  translate (0,0,0);//use translate to reposition the 3D object (x,y,z axis)
  rotateX(radians(-180));//corrects flipped objects
  model(dress1);
  texture(texture1);
  orbitControl(100,0,0);
  
}

  //fullscreen mode
   function touchStarted () {
  if (!fullscreen()) {
    fullscreen(true);
  }
}
/* full screening will change the size of the canvas */
function windowResized() {
  resizeCanvas(fullScreen, true);
}
document.ontouchmove = function(event) {
    event.preventDefault();
};

I have not attempted any solution because I am uncertain of how to proceed and can not find any examples online for how to call an image or 3D model when the button is pressed.

0

There are 0 best solutions below