# Creating a small 3D model (House)

**URL:** <https://discourse.processing.org/t/creating-a-small-3d-model-house/38891>\
**Category:** Project Guidance\
**Created:** [September 21, 2022, 2:38am UTC](https://discourse.processing.org/t/creating-a-small-3d-model-house/38891 "2022-09-21T02:38:48Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![a\_random\_cat](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@a\_random\_cat](https://discourse.processing.org/u/a_random_cat)\
**Post date:** [September 21, 2022, 2:38am UTC](https://discourse.processing.org/t/creating-a-small-3d-model-house/38891/1 "2022-09-21T02:38:48Z")

</div>

Hello.  
Can someone help me with a small 3d model?  
I want to make a small “area” with only a street, a basic house and a street lamp.  
I tried to create the basic template, but for a reason all the objects gets pushed in a weird way and I cant manage to place one object on top of other, for example the base of the streetlight and the street.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 21, 2022, 3:44am UTC](https://discourse.processing.org/t/creating-a-small-3d-model-house/38891/2 "2022-09-21T03:44:53Z")

</div>

Can you please post your entire code so we can work from there

---

<div class="post-metadata">

**Author:** ![a\_random\_cat](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@a\_random\_cat](https://discourse.processing.org/u/a_random_cat)\
**Post date:** [September 22, 2022, 2:09am UTC](https://discourse.processing.org/t/creating-a-small-3d-model-house/38891/4 "2022-09-22T02:09:33Z")

</div>

That model is perfect, thank you so much

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 22, 2022, 10:44am UTC](https://discourse.processing.org/t/creating-a-small-3d-model-house/38891/5 "2022-09-22T10:44:54Z")

</div>

Model a bit simplified.

- No class, no plates, no ArrayList

- Mainly working with boxes, called by the function `boxParams`

- cam flies around the scene on a circle; use mouseY for cam height (mouse up and down)

```auto

// Simple scene 

// floor Y 
final int GROUND_LEVEL_Y = 480;

// cam stuff: cam flies around the scene on a circle; mouseY for cam height 
float camAngle = 0; // rotation angle in degree 

// ---------------------------------------------------------------------
// 2 core functions 

void setup() {
  size(1600, 900, P3D);
  background(20, 22, 170);
  avoidClipping();
} // func 

void draw() {
  background(20, 22, 170);
  lights();

  // camera();
  cameraManagement();

  // house and ground and street
  drawHouse();

  // draw Lamp Posts
  for (int i=0; i < 9; i++) {
    drawLampPost(600-i*150, 386);
  }//for
} // func

// ---------------------------------------------------------------------
// other main functions

void drawHouse() {
  // House 

  // Sphere at the house
  fill(250, 0, 0);//red 
  sphereParams (0, 600/2, 120, 
    140);

  // main house: a box 
  fill(210);//gray 
  stroke(40);
  boxParams (0, 600/2, 0, 
    360, 360, 360);

  // ground 
  fill(0, 255, 0); // green 
  boxParams (0, GROUND_LEVEL_Y, 0, 
    1360, 2, 1360);

  // A way 
  fill(144); // dark 
  boxParams (0, GROUND_LEVEL_Y-1, 320, 
    1360, 2, 60);
  //
} // 

void drawLampPost(float postX_, float postY_) {
  // Lamp Post

  // data
  final float postHeight=140;
  final float postDiam=12; 

  final float postX=postX_; 
  final float postY=GROUND_LEVEL_Y-postHeight/2; 
  final float postZ=postY_; 

  // The post is a box (with parameters)
  fill(217);
  stroke(33);
  boxParams(postX, postY, postZ, // the position of the box  
    postDiam, postHeight, postDiam); // the dimensions of the box 

  // The lamp on top 
  fill( #FCFF4D ); // yellow  
  sphereParams (postX, postY-postHeight/2, postZ, 
    postDiam*2.4);
}

void cameraManagement() {
  // make a camera that rotates 

  final float camRadius = 800; // e.g. 700 radius (dist to scene)
  float camX=0, camY=0, camZ=0; // its position 

  // cam pos (eye) 
  camX= camRadius * cos ( radians(camAngle) ) +0;
  camY= map(mouseY, 0, height, -440, GROUND_LEVEL_Y-12); // OR: GROUND_LEVEL_Y-240;
  camZ= camRadius * sin ( radians(camAngle) ) +0;

  // set cam
  camera(camX, camY, camZ, // cam pos (eye) 
    0.0, GROUND_LEVEL_Y-200, 0.0, // look at 
    0.0, 1.0, 0.0); // angles are standard 

  // camera can be stopped. 
  if (!keyPressed) {
    // rotate
    camAngle+=0.6;
    if (camAngle>360) 
      camAngle=0;
  } // if
}

// ---------------------------------------------
// 3 helper functions

void boxParams(float x, float y, float z, 
  float sizeX, float sizeY, float sizeZ) {
  // a box with parameters (both colors (stroke and fill) must be set before calling the function)
  pushMatrix();
  translate(x, y, z);
  box(sizeX, sizeY, sizeZ);
  popMatrix();
}

void sphereParams(float x, float y, float z, 
  float sizeSphere) {
  // a sphere with parameters (the fill color must be set before calling the function; noStroke() is used in the function)
  pushMatrix();
  noStroke(); 
  translate(x, y, z);
  sphere(sizeSphere);
  popMatrix();
}

void avoidClipping() {
  // avoid clipping (at camera): 
  // 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 
//

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 22, 2022, 11:05am UTC](https://discourse.processing.org/t/creating-a-small-3d-model-house/38891/6 "2022-09-22T11:05:46Z")

</div>

by the way:

in 3D mode (using P3D), the point 0,0,0 is in the upper left corner  
(like in 2D) but the standard camera looks to a point right from there:

- to width/2.0, height/2.0 and a Z-Position

You can see this here:

```auto
void setup() {
  size(1600, 900, P3D);
  background(20, 22, 254);
} // func 

void draw() {
  background(20, 22, 254);
  lights(); 

  sphereParams(0, 0, 0, 
    140);
}

void sphereParams(float x, float y, float z, 
  float sizeSphere) {
  // a sphere with parameters (the fill color must be set before calling the function; noStroke() is used in the function)
  pushMatrix();
  noStroke(); 
  translate(x, y, z);
  sphere(sizeSphere);
  popMatrix();
}
//

```

The sphere is in the upper left corner.

The standard camera has these default values :

```auto
camera(width/2.0, height/2.0, (height/2.0) / tan(PI*30.0 / 180.0), // pos
width/2.0, height/2.0, 0, // look at
0, 1, 0); // angle 

```

Therefore in the “House Sketch” the cam is looking at  
`0, GROUND_LEVEL_Y-200, 0` which is the center of the scene.

**Remark**

Remember that in a 3D Sketch,

- x is normal (left/right position)
- but y is the virtual height **above** the scene and
- Z is into the screen (away from you) (forward / backward position)

So to place something on the scene / stage we mainly change x and z (!), not so much y.

**The idea of 3D space**

The idea of 3D space (with `size(1600, 900, P3D);`) is that you draw not on a canvas but inside a box / room / stage where you can place stuff further away (away from you, into the screen depth, Z-value) or nearer to you.

Imagine the room as the _space on a table_ where you place your scene:

The idea is that

- the first parameter is x (you move something left and right on the table surface e.g.),
- the 2nd parameter (y) is the height (you move something up and down **above** the table) and
- the 3rd parameter (z) is that you move something back and forth **on** the table surface (depth).

**The camera**

The camera has 9 parameters: 3 for position, 3 for lookAt, 3 for UP vector.

**Houses**

See also houses [Some Movies I made - #23 by Chrisir](https://discourse.processing.org/t/some-movies-i-made/13306/23)

Warm regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 24, 2022, 12:52pm UTC](https://discourse.processing.org/t/creating-a-small-3d-model-house/38891/7 "2022-09-24T12:52:27Z")

</div>

Hello @a_random_cat,

There is a tutorial here:  
[https://processing.org/tutorials/p3d](https://processing.org/tutorials/p3d)

[Scrutinize](https://www.merriam-webster.com/dictionary/scrutinize) the first example in the _3D shapes_ section and look up all the references.

The above is a _static sketch_ (static mode)… you can create an _interactive sketch_ (active mode) with `setup()` and `draw()`.

References:

- [https://processing.org/tutorials/overview](https://processing.org/tutorials/overview)
- [Active an Static mode](https://books.google.ca/books?id=SqKEEAAAQBAJ&pg=PA109&lpg=PA109&dq=static+active+mode+processing.org&source=bl&ots=L5jvDfjaCr&sig=ACfU3U0bwYDpPqqcqfZPvzEZENbuW-ZBhg&hl=en&sa=X&ved=2ahUKEwiei5_5uq36AhWck4kEHS1aCs4Q6AF6BAgYEAM#v=onepage&q=static%20active%20mode%20processing.org&f=false)

Have fun!

`:)`