I have a problem with 3D and 2D things using peasycam

Hello guys, with the help of Chrisir i'm developing a program that you have a 3D shape and it's allows you to click on the parts of the shape and each part shows you some information. The problem is that I want the info to appear static and in 2D but I can't, it's affected and I saw it in 3D.

I tried putying the code that calls the text with the info between beginHUD(); and endHUD(); but it crashes the program.

Here is the code.

    import peasy.*;

    PeasyCam cam;

PShape ammonite;
PImage fondo, titulo, titulo2;
String estado;
PFont helvetica, nexa;

// invisible PGraphics
PGraphics pg;

//define hot spots
PVector[] hotSpotsPosition=new PVector[4];
color[] hotSpotsColor =new color [hotSpotsPosition.length];
String[] hotSpotsText = new String [hotSpotsPosition.length];
PImage[] hotSpotsImg = new PImage [hotSpotsPosition.length];
boolean [] hotSpotsRightSide = new boolean [hotSpotsPosition.length];

int undefined=-1;
int hotSpotFound=undefined; // when undefined no text is displayed

void setup() {
  fullScreen(P3D);

  imageMode(CENTER);
  textAlign(CENTER);

  cam = new PeasyCam(this, 100);
  cam.setMinimumDistance(110);
  cam.setMaximumDistance(500);

  ammonite = loadShape("ammonite.obj");
  println ("just loaded ammonite");
  println( ammonite.getChildCount() +" child count");

  // define the hot spots in parallel arrays
  // the first hot spot is defined in hotSpotsPosition[0] and hotSpotsColor[0] and hotSpotsText[0]
  // positions:
  hotSpotsPosition[0] = new PVector(-15, -20, 0);
  hotSpotsPosition[1] = new PVector(-5, -5, -25);
  hotSpotsPosition[2] = new PVector(-20, -10, 3);
  hotSpotsPosition[3] = new PVector(-25, -10, 15);
  //colors: colors are not visible but must be unique!!!!!!
  hotSpotsColor[0] = color(255, 0, 0);
  hotSpotsColor[1] = color(100, 0, 0);
  hotSpotsColor[2] = color(110, 0, 0);
  hotSpotsColor[3] = color(120, 0, 0);
  // texts
  hotSpotsText[0] = "embudo";
  hotSpotsText[1] = "caparazon";
  hotSpotsText[2] = "ojos";
  hotSpotsText[3] = "tentaculos";
  //images
  // use different file names here
  hotSpotsImg[0] = loadImage ("top shell color.JPG");
  hotSpotsImg[1] = loadImage ("top shell color.JPG");
  hotSpotsImg[2] = loadImage ("top shell color.JPG");
  hotSpotsImg[3] = loadImage ("top shell color.JPG");
  // whether we display the spot left or right
  hotSpotsRightSide[0] = false;
  hotSpotsRightSide[1] = true;
  hotSpotsRightSide[2] = true;
  hotSpotsRightSide[3] = true;

  for (PImage img : hotSpotsImg)
    img.resize(100, 0);

  fondo = loadImage("fondo.jpg");
  titulo = loadImage("titulo.png");
  titulo2 = loadImage("conociendo.png");

  estado = "inicio";

  helvetica = createFont("HelveticaWorld-Regular.ttf", 30);
  nexa = createFont("Nexa Bold.otf", 50);

  pg = createGraphics(width, height, P3D);

  fondo.resize(width, height);
  image(fondo, width/2, height/2);
}//func

void draw() {

  avoidClipping(); // so the graphic AMMONITE is not cut when rotating

  if (estado.equals("inicio")) {
    //-----------Stopping peasy ------
    cam.beginHUD();
    image(fondo, width/2, height/2);
    textFont(nexa);
    text("AMMONITE", width/2, height/6 - 50);
    text("EL ANCESTRO MARINO", width/2, height/6);
    textFont(helvetica);
    text("Toca para comenzar", width/2, height/2 + 300);
    cam.endHUD(); //--------------------------------
  }//if
  // --------------------- next estado !!!! --------
  else if ( estado.equals("modelo")) {

    doEstadoModelo(); // most important
  }//else if
  // --------------------- EROR - NO estado - program error !!!! --------
  else {
    println ("--------------- EROR - NO estado in draw() !!!! --------");
    exit();
    return;
  }//else
}//func draw()

//------------------------------------------------------------------------

void mousePressed() {
  if (estado.equals("inicio")) {
    // start screen
    estado = "modelo";
  }
  // --------------------- next estado !!!! --------
  else if ( estado.equals("modelo")) {
    //
    color colorFromMouse = pg.get(mouseX, mouseY);
    int oldHotSpotFound=hotSpotFound;
    // hotSpotFound=undefined; // reset
    for (int i=0; i<hotSpotsPosition.length; i++) {
      if (colorFromMouse==hotSpotsColor[i]) {
        if (i==oldHotSpotFound)
          hotSpotFound=undefined; // reset
        else
        hotSpotFound=i; // set
        break;
      }//if
    }//for
    //---
  }//else if
  // --------------------- EROR - NO estado !!!! --------
  else {
    println ("--------------- EROR - NO estado in mousePressed() !!!! --------");
    exit();
    return;
  }//else
}//func

void doEstadoModelo() {

  makeInternalPGraphics();

  // HUD ----
  cam.beginHUD();
  image(fondo, width/2, height/2, width, height);
  textFont(nexa);
  fill(255);
  text("CONOCIENDO AL AMMONITE", width/2, height/6 - 50);


  // show Ammonite
  pushMatrix();
  spotLight(255, 255, 255, 80, 20, 40, -1, 0, 0, PI/2, 2);
  directionalLight(255, 255, 255, width/2, height/2, 20);
  scale(20);
  shape(ammonite);
  popMatrix();

  // spheres
  for (int i=0; i<hotSpotsPosition.length; i++) {
    PVector pv = hotSpotsPosition[i];
    pushMatrix();
    translate(pv.x, pv.y, pv.z);
    noStroke();
    // use any color your want here
    fill(255, 2, 2, 50);
    if (i==hotSpotFound) {
      fill(2, 255, 2, 50);
    }
    sphere(7);
    popMatrix();
  }

  // if a hot spot has been clicked:
  if (hotSpotFound!=undefined) {

    if (hotSpotsRightSide[hotSpotFound]) {
      // show rect with text
      // on right side
      pushMatrix();
      translate(hotSpotsPosition[hotSpotFound].x,
        hotSpotsPosition[hotSpotFound].y,
        hotSpotsPosition[hotSpotFound].z);
      scale(0.5);
      fill(250, 250, 35);
      rect(0, 0, 100, 100);
      fill(0);
      textFont(helvetica);
      textSize(9);
     textMode(SHAPE);
      translate(0, 0, 0.2);
      text(hotSpotsText[hotSpotFound], 4, 4, 90, 92);
      if (hotSpotsImg[hotSpotFound]!=null) {
        translate(100+hotSpotsImg[hotSpotFound].width/2, 0, 0);
        image(hotSpotsImg[hotSpotFound], 0, 0);
      }
      popMatrix();
    } else
    {
      // show rect with text
      // on left side
      pushMatrix();
      translate(hotSpotsPosition[hotSpotFound].x-50,
        hotSpotsPosition[hotSpotFound].y,
        hotSpotsPosition[hotSpotFound].z);
      //  translate(-50, 0, 0);
      fill(250, 250, 35);
      scale(0.5);
      rect(0, 0, 100, 100);
      fill(0);
      textFont(helvetica);
      textSize(9);
      textMode(SHAPE);
      translate(0, 0, 0.2);
      text(hotSpotsText[hotSpotFound], 4, 4, 90, 92);
      if (hotSpotsImg[hotSpotFound]!=null) {
        translate(-25-hotSpotsImg[hotSpotFound].width/4, hotSpotsImg[hotSpotFound].height/2, 0);
        image(hotSpotsImg[hotSpotFound], 0, 0);
      }
      popMatrix();
      cam.endHUD(); // ----
    }//else
  }//if
}//func

void makeInternalPGraphics() {
  pg.beginDraw();
  pg. perspective(PI/3.0, (float) width/height, 1, 1000000);
  pg.setMatrix(getMatrix()); // replace the PGraphics-matrix
  pg.background(0);
  pg.noLights();
  for (int i=0; i<hotSpotsPosition.length; i++) {
    PVector pv=hotSpotsPosition[i];
    pg.pushMatrix();
    pg.translate(pv.x, pv.y, pv.z);
    pg.noStroke();
    pg.fill(hotSpotsColor[i]);
    pg.sphere(7);
    pg.popMatrix();
  }//for
  pg.endDraw();
}//func

void avoidClipping() {
  // avoid clipping :
  // https : // // forum.processing.org/two/discussion/4128/quick-q-how-close-is-too-close-why-when-do-3d-objects-disappear
  perspective(PI/3.0, (float) width/height, 1, 1000000);
}//func //

Any help or advice will be so helpful, thanks!