# Custom 3d shapes in p5.js

I tried to create custom 3d shape using `beginShape` method. I have successfully created 2d view and added `orbitControl`. Now I can move around the shape but it looks flat. I tried to use z value but it’s looks different than I expected. Please check the below codepen

I wanted to create 3D version like below:

How I can achieve the above. Thanks in advance.

You don’t have a z-component in your vertexes, so it just will be flat.
Just an example.

@noel When I try using z values in vertex it’s looks like below

In 3D you really have to imagine spatially.
Let’s say we want a square from the origin (0, 0, 0) to the right without going forwards or backward, and another from the origin forwards (towards you)
Imagine what coordinates you would use.

``````function setup() {
createCanvas(800, 600, WEBGL);
}

function draw() {
background(175);
orbitControl(5,5,5);
drawShape();
}

function drawShape() {
fill("#555555");
beginShape();    // first rectangle to the right

vertex(0, 0, 0);  // origin
vertex(100, 0, 0);  // 100 right
vertex(100,-100, 0);  // 100 right & 100 up
vertex(0, -100, 0);   // origin 100 up
//  second rectangle outwards (to your direction)
vertex(0, 0, 0);  // origin
vertex(0, 0, 100);  // origin 100 out
vertex(0,-100, 100);  // 100 up 100 out
vertex(0, -100, 0);  // origin 100 up

endShape(CLOSE);
}
``````
1 Like

@noel your reply gave me the different perspective of drawing. I think I need learn 3D basics first before doing this . I will try and reply in this thread with final output.

1 Like

Personally I try to keep it simple and more extended for understanding.
I saw you withdraw your last post, but I will post the answer anyway.

``````function setup() {
createCanvas(800, 600, WEBGL);
}

function draw() {
background(175);
orbitControl(5, 5, 5);
drawShape();
}

function drawShape() {

beginShape();
fill("gray");
vertex(0, 0, 0);
vertex(200, 0, 0)
vertex(200, 0, 100);
vertex(100, 0, 100);
vertex(100, 0, 200);
vertex(0, 0, 200);
endShape();

beginShape();
fill("yellow")
vertex(0, 0, 0);
vertex(0, 20, 0);
vertex(200, 20, 0)
vertex(200, 0, 0);
endShape();

beginShape();
fill("red");
vertex(200, 0, 100);
vertex(200, 20, 100);
vertex(100, 20, 100);
vertex(100, 0, 100);
endShape();

beginShape();
fill("blue");
vertex(100, 20, 100);
vertex(100, 20, 200);
vertex(100, 0, 200);
vertex(100, 0, 100);
endShape();

beginShape();
fill("green");
vertex(0, 0, 0)
vertex(0, 0, 200)
vertex(0, 20, 200)
vertex(0, 20, 0)
endShape();
}
``````
1 Like