# Drawing a shape in xz plane

**URL:** <https://discourse.threejs.org/t/drawing-a-shape-in-xz-plane/20052>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [October 22, 2020, 8:52pm UTC](https://discourse.threejs.org/t/drawing-a-shape-in-xz-plane/20052 "2020-10-22T20:52:22Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ujwaldeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ujwaldeep_singh/32/13304_2.png) [@Ujwaldeep\_Singh](https://discourse.threejs.org/u/Ujwaldeep_Singh)\
**Post date:** [October 22, 2020, 8:52pm UTC](https://discourse.threejs.org/t/drawing-a-shape-in-xz-plane/20052/1 "2020-10-22T20:52:22Z")

</div>

Hi  
How can I a draw a shape in xz plane using mouse clicks?

The scenario is I want to draw a shape using Shapes of three.js but from the top view on the 3D model (Like a roof of a building). Now shapes allows me to draw lines using THREE.Shape but I can pass only x and y as coordinates. I want it to be dynamic using mouse clicks and y will be constant where as x and z will define the shape.

Would be helpful if you can share a sample code as well.

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [October 23, 2020, 6:51am UTC](https://discourse.threejs.org/t/drawing-a-shape-in-xz-plane/20052/2 "2020-10-23T06:51:57Z")

</div>

Have you already seen these examples?  
They might be helpful for your problem. 🙂

[Construction of frames with contour/profile](https://discourse.threejs.org/t/construction-of-frames-with-contour-profile/13490)

In the

> [@Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315):
>
> The answers to some questions contain some very interesting and instructive basic examples. These are difficult to find in the large number of questions on discourse.There are also good examples in resources and showcase. Therefore I collected them and put them on one page, clearly arranged by time. The collection may be a help for beginners. slightly_smiling_face UPDATE 2019 [http://discourse.threejs.hofk.de/](http://discourse.threejs.hofk.de/) is now redirected to the safe side [\* discourse.threejs.hofk.de](https://hofk.de/main/discourse.threejs/) UPDATE 202…

see  
[WallBuilding](https://hofk.de/main/discourse.threejs/2019/WallBuilding/WallBuilding.html)  
[Create3D](https://hofk.de/main/discourse.threejs/2019/Create3D/Create3D.html)  
[ClickLength](https://hofk.de/main/discourse.threejs/2019/ClickLength/ClickLength.html)

Links in source code.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 23, 2020, 8:03am UTC](https://discourse.threejs.org/t/drawing-a-shape-in-xz-plane/20052/3 "2020-10-23T08:03:42Z")

</div>

@Ujwaldeep_Singh  
Hi!  
Why do you use `THREE.Shape` for drawing of lines?  
Use that set of points from xz-plane in a geometry for `THREE.Line` or `THREE.LineLoop`.

---

<div class="post-metadata">

**Author:** ![Ujwaldeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ujwaldeep_singh/32/13304_2.png) [@Ujwaldeep\_Singh](https://discourse.threejs.org/u/Ujwaldeep_Singh)\
**Post date:** [October 23, 2020, 9:02am UTC](https://discourse.threejs.org/t/drawing-a-shape-in-xz-plane/20052/4 "2020-10-23T09:02:54Z")

</div>

@prisoner849 Because I want to draw a shape with a face, like a double sided plane.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 23, 2020, 9:14am UTC](https://discourse.threejs.org/t/drawing-a-shape-in-xz-plane/20052/5 "2020-10-23T09:14:55Z")

</div>

In general, you need just negate `z`-coordinate of the points you get from xz-plane and put it in `y`-coordintate of the points for `THREE.Shape`.

Quick example: [https://jsfiddle.net/prisoner849/0njg4dyx/](https://jsfiddle.net/prisoner849/0njg4dyx/)

---

<div class="post-metadata">

**Author:** ![Ujwaldeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ujwaldeep_singh/32/13304_2.png) [@Ujwaldeep\_Singh](https://discourse.threejs.org/u/Ujwaldeep_Singh)\
**Post date:** [October 23, 2020, 8:18pm UTC](https://discourse.threejs.org/t/drawing-a-shape-in-xz-plane/20052/6 "2020-10-23T20:18:34Z")

</div>

@prisoner849 Please take a look at this question.

# [Calculate remaining two points of rectangle from given two points](https://discourse.threejs.org/t/calculate-remaining-two-points-of-rectangle-from-given-two-points/20064)

Is there an easy way to get this done also?