# Text on top of 3D box

**URL:** <https://discourse.processing.org/t/text-on-top-of-3d-box/35757>\
**Category:** Coding Questions\
**Created:** [March 15, 2022, 2:17am UTC](https://discourse.processing.org/t/text-on-top-of-3d-box/35757 "2022-03-15T02:17:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Divitiacus](https://avatars.discourse-cdn.com/v4/letter/d/848f3c/32.png) [@Divitiacus](https://discourse.processing.org/u/Divitiacus)\
**Post date:** [March 15, 2022, 2:17am UTC](https://discourse.processing.org/t/text-on-top-of-3d-box/35757/1 "2022-03-15T02:17:39Z")

</div>

I have a 3D box and I would like to show data on top of the picture, which are always on front and are not moving, when I move the box.  
I found, that hint can be used to disable depth test for that but that just gives text, which turns with the box camera angle, instead of staying independent of it.

 ![2Dsurface2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c3f50938e6fe0aed5d3c203ab3bbb835dd68d359.png)

I can try to rotate the text in opposition to the camera angle. That looks good, but as soon as I hit the mouse button to turn the box, the text slightly bends in.

 ![2Dsurface](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/532ec87c093cf1320501fafb37f91ce0330ec8cb.png)

I am not sure, how to get to a text, which just stay’s on on top of the rest without moving.

Here the relevant code of the part that draws everything :

```auto
void draw(){
  background(129,200,273);
  lights();
  translate(450,350,0);
  rotateY(camangle);
  noFill();
  stroke(0);
  box(boxsize);
  
 for (int j=0; j < coil.length; j++){
  for (int i = 1; i < coil[j].segments.length; i++){
    PVector point0 = new PVector();
    PVector point1 = new PVector();
    point0 = coil[j].segments[i-1].location.copy();
    point1= coil[j].segments[i].location.copy();
//check that segments are within box; while instead of if to cover cases with coordinates larger than boxsize/2    
   while (point0.x > boxsize/2){ point0.x -=boxsize; }
   while (point0.x < -boxsize/2){ point0.x +=boxsize; }
   while (point0.y > boxsize/2){ point0.y -=boxsize; }
   while (point0.y < -boxsize/2){ point0.y +=boxsize; }
   while (point0.z > boxsize/2){ point0.z -=boxsize; }
   while (point0.z < -boxsize/2){ point0.z +=boxsize; }
   while (point1.x > boxsize/2){ point1.x -=boxsize; }
   while (point1.x < -boxsize/2){ point1.x +=boxsize; }
   while (point1.y > boxsize/2){ point1.y -=boxsize; }
   while (point1.y < -boxsize/2){ point1.y +=boxsize; }
   while (point1.z > boxsize/2){ point1.z -=boxsize; }
   while (point1.z < -boxsize/2){ point1.z +=boxsize; } 
    
    //check if points are on opposite ends of box, then no line is drawn, 2*sdistance to accommodate deviation
    if (abs(point1.x - point0.x) < 2*sdistance && abs(point1.y - point0.y) < 2*sdistance && abs(point1.z - point0.z) < 2*sdistance*sdistance){
      strokeWeight(5);
      line(point0.x,point0.y, point0.z, point1.x, point1.y, point1.z);
      strokeWeight(1);
    }
  }
 }
  
  if(mousePressed == true){
    camangle += 0.1;
  }

   textSize(30);
   //hint(DISABLE_DEPTH_TEST);
   pushMatrix();
   rotateY(-camangle);
   text(coil[j].cRg, -boxsize+50+j*150, boxsize-200);
   popMatrix();
   //hint(ENABLE_DEPTH_TEST);
   
  }
}

```

---

<div class="post-metadata">

**Author:** ![Shwaa](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shwaa/32/9696_2.png) [@Shwaa](https://discourse.processing.org/u/Shwaa)\
**Post date:** [March 15, 2022, 2:46am UTC](https://discourse.processing.org/t/text-on-top-of-3d-box/35757/2 "2022-03-15T02:46:23Z")

</div>

If what you want is to draw like a 2d sketch over your 3d sketch, this post will help you:

> [@Drawing 2D GUI over a 3D sketch](https://discourse.processing.org/t/drawing-2d-gui-over-a-3d-sketch/22819):
>
> I’m making a 3D game, and a problem I ran into was drawing a 2D GUI over top of the main 3D sketch. The solution I found is pretty simple, but it works really well: //IMPORTANT: make sure to use textMode(SHAPE) before using this!! Otherwise text will be drawn as black boxes. //GUI hint(DISABLE\_DEPTH\_TEST); //draws on top of whatever is drawn on screen camera(); //reset camera to default position, which conveniently lines up with the screen exactly ortho(); //orthographic projection r…

---

<div class="post-metadata">

**Author:** ![Divitiacus](https://avatars.discourse-cdn.com/v4/letter/d/848f3c/32.png) [@Divitiacus](https://discourse.processing.org/u/Divitiacus)\
**Post date:** [March 15, 2022, 3:15am UTC](https://discourse.processing.org/t/text-on-top-of-3d-box/35757/3 "2022-03-15T03:15:35Z")

</div>

That was, what I had looked at, but I didn’t reset the camera. Now it works. The ortho() function doesn’t help because it flattens the box, so to say.

---

<div class="post-metadata">

**Author:** ![Shwaa](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shwaa/32/9696_2.png) [@Shwaa](https://discourse.processing.org/u/Shwaa)\
**Post date:** [March 15, 2022, 12:53pm UTC](https://discourse.processing.org/t/text-on-top-of-3d-box/35757/4 "2022-03-15T12:53:38Z")

</div>

The ortho() function at the end of draw must me paired with a call to perspective() at the beginning of draw to restore your desired camera mode. This should fix the flat box.