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.