How to join lines to get a shape

How to create the polygons with the mouse like we do in sketchup

i need a way to create the polygons as we do in sketchup and also scale them like here we have so i can draw polygons with the mouse and scale them some thing like this

Hi, have you read three.js documentation? It can be found here

i read it. it require a logic not reading

Is my description is sufficient or you need more details

Having this statement and provided examples, seems you already answered your question yourself.

1 Like

no actually the fiddle is not working in 3d environment properly i need a tool that create any polygon and i am able to select it and scale it and same like this and only one more functionality to convert it into the 3d solid form it needed and scale the solid form too same functionality how to achieve in three js

@Yash_Joshi you can mention user here, please avoid unnecessary double posts.



  1. Use THREE.Plane() and THREE.Raycaster() to set points of a polygon
  2. Use those points to create an instance of THREE.Shape()
  3. Use the shape to create THREE.ExtrudeBufferGeometry()

thanx i am thinking in same way please can you give a sample in this env this is really a great help @prisoner849 and i appreciate it App.js (2.5 KB) this is my root file please can you add that mechnism here and here this line raycaster,setcamerafrom is giving error do you know why?

Could your create an editable live code example, where you try something yourself?
At all the respect, I have neither time nor wish to do your job for you.


please this is my react project please can you add a smaple that have a mouse event to select the points and create custom shape please i am new to it thats why asking @prisoner849

@prisoner849 pointed you in a good direction by outlining a procedure and linking to docs of relevant classes. If the docs are insufficient or you get stuck in the procedure, you may search/ask about the specific problems you encounter. Eventually you will most likely find yourself in situations where you need to inspect the source code of three.js. That’s were learning starts for real. :sunglasses:

By the way, @prisoner849 has posted a related jsfiddle that uses some of the functionality you will need:


I made something similar in the past

Click the plane 5 times: 4 are for setting points, the 5th is to extrude the resulted polygon.


its a great help @prisoner849 i appreciate it but i need it in this way means first border the polygon and than replace with the shape and polygon creation like this please @EliasHasle can you look into it and help me

No. I, too, have neither the time nor wish to do your job for you (once said by a wise man). I encourage you to learn how to do it yourself. We have provided you with multiple starting points. Good luck, and happy coding! :smiley:


i only need a way to create a polygon with mouse like i share a fiddle can you help me atleast in that so i can join that logic please :roll_eyes:

Your fiddle works for drawing line segments. Then I guess you can reuse the values in the array for a THREE.Shape and extrude the shape using THREE.ExtrudeBufferGeometry. Maybe someone else wants to help you more. Personally, I have helped people with debugging almost correct jsfiddles, as well as with pointing them to relevant classes. Rarely with doing the whole implementation.


Hi everything works fine i am able to understand the logic you write and i am able to create the polygons too dynamically i only need a help in moving and updating the vertices that does not work for me please can you take a look index.html (4.9 KB) @prisoner849 can you also take a look