Drawing a shape in xz plane

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.

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

Construction of frames with contour/profile

In the


Links in source code.

1 Like

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.

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

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/

1 Like

@prisoner849 Please take a look at this question.

Calculate remaining two points of rectangle from given two points

Is there an easy way to get this done also?