# Making a 3D table
**URL:** https://discourse.processing.org/t/making-a-3d-table/11724
**Category:** Libraries
**Created:** [May 30, 2019, 11:16pm UTC](https://discourse.processing.org/t/making-a-3d-table/11724 "2019-05-30T23:16:22Z")
**Posts on this page:** 1
**Showing post:** 11
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 31, 2019, 5:34pm UTC](https://discourse.processing.org/t/making-a-3d-table/11724/11 "2019-05-31T17:34:17Z")
Yes look at the camera command
(I modified the parameters of your table (swapped y and z) and removed peasyCam)
The idea of 3D space is that you draw not on a canvas but inside a box / room where you can place stuff further away (away from you, into the screen depth). The idea is that with `translate()`
- the first parameter is x (you move something left right on the table surface e.g.),
- the 2nd y is the height (you move something up and down **above** the table) and
- the 3rd z is that you move something back and forth on the table surface.
There is a first person camera lib called queasy cam
see also
> **[Kango/Processing-snippets](https://github.com/Kango/Processing-snippets/wiki/3D---P3D---OPENGL-BASICS)**
>
> These are small useful snippets. Please feel free to work on it. Best put ready to use functions in it. - Kango/Processing-snippets
* * *
First sketch: we move the table
```auto
ArrayList objects = new ArrayList();
void setup() {
size(600, 600, P3D);
// 4 legs
objects.add(new Objects(200-100, 102, -200, 10, 100, 10));
objects.add(new Objects(200+100, 102, -200, 10, 100, 10));
objects.add(new Objects(200-100, 102, -200+100, 10, 100, 10));
objects.add(new Objects(200+100, 102, -200+100, 10, 100, 10));
// and the table itself
objects.add(new Objects(200, 50, -200+50,
240, 10, 140 ));
}
void draw() {
background(55);
camera(width/2.0, height/2.0, (height/2.0) / tan(PI*30.0 / 180.0),
width/2.0, height/2.0, 0,
0, 1, 0);
lights();
translate(mouseX, mouseY, 0);
for (Objects o : objects)
o.show();
}
// ===============================================================
//class
class Objects {
PVector pos, bsize;
Objects(int x, int y, int z,
int b, int h, int t) {
pos = new PVector(x, y, z);
bsize = new PVector(b, h, t);
}
void show() {
pushMatrix();
translate(pos.x, pos.y, pos.z);
box(bsize.x, bsize.y, bsize.z);
popMatrix();
}
}//class
//
```
* * *
Next sketch: moving camera (x-pos and height)
```auto
ArrayList objects = new ArrayList();
void setup() {
size(600, 600, P3D);
// 4 legs
objects.add(new Objects(200-100, 102, -200, 10, 100, 10));
objects.add(new Objects(200+100, 102, -200, 10, 100, 10));
objects.add(new Objects(200-100, 102, -200+100, 10, 100, 10));
objects.add(new Objects(200+100, 102, -200+100, 10, 100, 10));
// and the table itself
objects.add(new Objects(200, 50, -200+50,
240, 10, 140 ));
}
void draw() {
background(55);
camera(mouseX, map(mouseY, 0, height, -200, 200), (height/2.0) / tan(PI*30.0 / 180.0),
200, 50, -200,
0, 1, 0);
lights();
// translate(mouseX, mouseY, 0);
for (Objects o : objects)
o.show();
}
// ===============================================================
//class
class Objects {
PVector pos, bsize;
Objects(int x, int y, int z,
int b, int h, int t) {
pos = new PVector(x, y, z);
bsize = new PVector(b, h, t);
}
void show() {
pushMatrix();
translate(pos.x, pos.y, pos.z);
box(bsize.x, bsize.y, bsize.z);
popMatrix();
}
}//class
//
```
* * *
next sketch
you can move the camera around in a room in which the table stands
hold a keyboard key - you can see a top view of room and table and where you are
the camera height (y) is fixed.
```auto
ArrayList objects = new ArrayList();
PVector cameraPos=new PVector();
final color RED=color(255, 0, 0);
final color GREEN=color(0, 255, 0);
final color BLUE=color(0, 0, 255);
final color WHITE=color(255);
void setup() {
size(1700, 900, P3D);
// the table itself
objects.add(new Objects(200, 50, -200+50,
240, 10, 140, color(170)));
// 4 legs
objects.add(new Objects(200-100, 102, -200, 10, 100, 10, RED));
objects.add(new Objects(200+100, 102, -200, 10, 100, 10, BLUE));
objects.add(new Objects(200-100, 102, -200+100, 10, 100, 10, GREEN));
objects.add(new Objects(200+100, 102, -200+100, 10, 100, 10, WHITE));
}
void draw() {
background(55);
cameraPos.set(mouseX, -26, map(mouseY, 0, height, -400, 300));
if (keyPressed) {
// 2D : top down view
background(255);
camera();
translate( width/2-200, 100+height/2 );
for (Objects o : objects)
o.show2D();
showSphere2();
} else
{
// 3D view
avoidClipping();
camera(cameraPos.x, cameraPos.y, cameraPos.z,
200, 45, -200+50,
0, 1, 0);
lights();
for (Objects o : objects)
o.show();
showSphere();
}
}
//----------------------------------------------------------------
void showSphere() {
//show camera look at in 3D
pushMatrix();
translate( 200, 45, -200+50 );
noStroke();
fill(RED);
sphere(6);
popMatrix();
}
void showSphere2() {
//show camera POS in 2D
pushMatrix();
translate( cameraPos.x, cameraPos.z );
noStroke();
fill(GREEN);
sphere(6);
popMatrix();
}
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
// ===============================================================
//class
class Objects {
PVector pos, bsize;
color col;
Objects(int x, int y, int z,
int b, int h, int t,
color col_) {
pos = new PVector(x, y, z);
bsize = new PVector(b, h, t);
col=col_;
}
void show() {
//3D
pushMatrix();
fill(col);
stroke(0);
translate(pos.x, pos.y, pos.z);
box(bsize.x, bsize.y, bsize.z);
popMatrix();
}
void show2D() {
// in 2D
fill(col);
stroke(0);
rect(pos.x-bsize.x/2, pos.z-bsize.z/2,
bsize.x, bsize.z);
}
}//class
//
```
Chrisir
---
_[View the full topic](https://discourse.processing.org/t/making-a-3d-table/11724)._