Click event on 3D primitive

p5.js Coding Questions
3

There are 2 easy ways :

  • look at screenX and screenY (see reference), store those. Compare to mouse position with dist(). If dist<70 it’s a hit. if(dist(mouseX,mouseY,myScreenX,myScreenY)<70) hit = true;

  • Use color myColor = get(mouseX, mouseY); to measure the color underneath the mouse when you click. Compare to background color. When it’s not equal it’s a hit.
    Take a look at Jeremy‘s post here: Problem with hover on area curves

  • reference: https://www.processing.org/reference/

Use lights(); in 3D - looks much better

And welcome to the forum! Nice to have you here!

Chrisir

Example for the first approach:


ArrayList<SphereClass> list = new ArrayList();  

void setup() {
  size(1300, 900, P3D);

  // init all spheres 
  SphereClass newSphere=new SphereClass(360, 230, -130);
  list.add(newSphere);

  newSphere=new SphereClass(530, 230, -230);
  list.add(newSphere);

  newSphere=new SphereClass(230, 230, 130);
  list.add(newSphere);
}

void draw() {
  background(0);
  lights(); 

  // loop over all spheres 
  for (SphereClass sphere : list) { 
    // show it
    sphere.display();
  }//for
} 

void mousePressed() {
  // loop over all spheres 
  for (SphereClass sphere : list) {
    // select / unselect depending on mouse pos 
    sphere.selectWhenMouseOver();
  }//for
}

// ===========================================================

class SphereClass {

  PVector pos; // 3D vector
  PVector screenPos=new PVector(0, 0); // 2D vector  

  boolean selected=false; 

  // constr
  SphereClass(float x, float y, float z) {
    pos = new PVector(x, y, z); // 3D vector
  }// constr

  void display() {
    // draw sphere at pos (x, y, z) coordinate and store 2D screen pos

    pushMatrix();
    translate(pos.x, pos.y, pos.z);
    noStroke(); 

    // we choose the color depending on selected 
    if (selected)
      fill(255, 0, 0); // red 
    else
      fill(0, 0, 255); // blue 

    // draw the sphere 
    sphere(50);

    // we monitor the 2D screen pos throughout and store it
    screenPos.set(screenX(0, 0, 0), screenY(0, 0, 0));
    popMatrix();

    // show the 2D screen pos
    if (keyPressed)
      drawSignX(screenPos);
  }

  void drawSignX( PVector pos ) { 
    // Draw a "X" sign
    // 
    float sizeHalf=60; 
    float x=pos.x;
    float y=pos.y;
    float z=pos.z;  
    stroke(255);
    line(x-sizeHalf, y-sizeHalf, z, x+sizeHalf, y+sizeHalf, z); 
    line(x+sizeHalf, y-sizeHalf, z, x-sizeHalf, y+sizeHalf, z);
  }

  void selectWhenMouseOver() {
    // select / unselect 
    if (mouseOver()) 
      selected=true;
    else 
    selected=false;
  }

  boolean mouseOver() {
    return 
      dist(mouseX, mouseY, screenPos.x, screenPos.y) < 30;
  }
  //
}//class
//
1 Like