How to make a 3D shape interactive in processing

Im working on a project with processing, im struggling in programing a globe to be interactive. I want to click on a country and make it give me information about it. For example, if i click on Spain (on the 3D globe) i want to see the population.
Here’s what i have so far, if someone can help me i would really appreaciate it. Thanks in advance!

float rotx = PI/4;
float roty = PI/4;
float rotz = PI/4;
PShape tierra;
PImage texturaTierra;

int x = 0;
int y = 0;
int z = 0;
 
 
void setup() {
  size(800,600,P3D);
  
  noStroke();
  fill(255);
  sphereDetail(200);
  
  texturaTierra = loadImage("Tierra2.jpg");
  tierra = createShape(SPHERE,150);
  tierra.setTexture(texturaTierra);
  
}
void draw() {
 
  background(0);
  lights();

  pushMatrix();   //esfera
    translate(width/2,height/2);
    rotateX(rotx);
    rotateY(roty);
    shape(tierra);
  popMatrix();
        
}

void mouseDragged() {
  float rate = 0.005;    //velocidad de rotacion
  rotx += (pmouseY-mouseY) * rate;
  roty += (mouseX-pmouseX) * rate;
}
1 Like

Don’t forget to format your code. Edit your post, select your code and click on the </> icon,

Here are some links that could be relevant to your topic:

https://forum.processing.org/two/discussion/27796/get-the-rgb-value-of-a-pixel-on-a-textured-sphere
https://forum.processing.org/two/discussion/19464/mapping-a-3d-sphere-with-gps-data-possible
https://forum.processing.org/two/discussion/22593/how-to-fill-the-sphere-with-the-earth-image
https://forum.processing.org/two/discussion/27787/set-transparency-of-texture-image-on-sphere-primitive-p3d

Picking objects in 3D (from a 2D perspective) requires ray tracing methods for 3D:

https://forum.processing.org/two/discussion/13695/ray-picking-question
https://www.processing.org/discourse/beta/num_1243897116.html
https://forum.processing.org/one/topic/peasycam-and-picking-library.html
https://forum.processing.org/two/discussion/21644/picking-in-3d-through-ray-tracing-method
https://forum.processing.org/one/topic/realtime-ray-tracing-on-processing.html
https://www.openprocessing.org/sketch/7881
https://forum.processing.org/one/topic/check-mouse-clicks-on-3-d-object.html

You also consider becoming familiar with:

http://n.clavaud.free.fr/processing/library/picking/
https://processing.org/reference/modelX_.html
https://processing.org/reference/screenX_.html

I just saw recently a topic of somebody showcasing some picking action on a 3D sketch… but I couldn’t find it. Maybe I saw it in the old forum.

Kf

1 Like

And I found the code I was taking about in my last post at the end:

Move a 3D object according to the screen’s XY axis, instead of the world’s X,Y,Z(PeasyCam)

Kf

1 Like

@kfrajer thanks for the help! i got another issue now, its mapping on the globe. I cant figure out how to use bufferedreader to use the latitude and longitude of the document to place a little sphere on every coordinate in that document. Im very confused, i tried with " for " but i got it wrong.

float rotx = PI/4;   //variables rotacion en ejes
float roty = PI/4;
float rotz = PI/4;

PShape tierra;        //variables para forma y texturizado
PImage texturaTierra;

float r = 200;     //radio de esfera

float lat;       //variables de posicionamiento de los "puntos"
float lon; 


String[] pais = new String[25];     //array para el documento txt.
int[] populacion = new int [25];
int[] longitud = new int [25];
int[] latitud = new int[25];
 
 
void setup(){
  size(600,600,P3D);
  sphereDetail(50);
  noStroke();
  
    BufferedReader reader = createReader("Obesidad.txt");
  String line = null;
  int i = 0;
  try {
    while ((line = reader.readLine()) != null) {
      String[] pieces = split(line, TAB);
      pais[i] = pieces[0];
      populacion[i] = int(pieces[1]);
      longitud[i] = int(pieces[2]);
      latitud[i] = int(pieces[3]);
      
      

      println("He leído "+pais[i]+" y "+ populacion[i]+" y "+ longitud[i] +" y "+ latitud[i]);
      i++;
    }
    reader.close();
  } 
  catch (IOException e) {
    e.printStackTrace();
  }
  
  texturaTierra = loadImage("Tierra.jpg");    //texturizar la esfera con imagen
  tierra = createShape(SPHERE,r);
  tierra.setTexture(texturaTierra);
  
 
    
}
 
 
void draw()
 {
   background(0);
   translate(width/2,width/2);   //centrar la esfera
   
   rotateX(rotx);    //rotacion de esfera en ejes
   rotateY(roty);
   
   noLights();
   shape(tierra);

   
   for(lat=0; lat <25; lat=lat+5) 
   {
    //coordenadas cartesianas 
   float theta = radians(lat) + PI/2;    //referencia: Coding Challenge #58 3D mapping 
   float phi = radians (-lon) + PI;
   
   float x = r * sin(theta) * cos(phi);
   float z = r * sin(theta) * sin(phi);
   float y = r * cos(theta); 
     
   pushMatrix();
   translate (x,y,z);
   fill(123,45,63);
   sphere(5);
   popMatrix();
   }
 }
 
 
 
 void mouseDragged() {     //click del raton para mover la esfera
  float velocidad = 0.005;    //velocidad de rotacion
  rotx += (pmouseY-mouseY) * velocidad;
  roty += (mouseX-pmouseX) * velocidad;
}