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 https://www.sketchup.com/plans-and-pricing/sketchup-free like here we have so i can draw polygons with the mouse and scale them https://jsfiddle.net/wilt/a21ey9y6/ some thing like this
Hi, have you read three.js documentation? It can be found here https://threejs.org/docs/
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 http://jsfiddle.net/eZQdE/43/ and only one more functionality to convert it into the 3d solid form it needed and scale the solid form too
https://www.loom.com/share/1ef8f4523b5a4e07b9be43652b548010 same functionality how to achieve in three js
@Yash_Joshi you can mention user here, please avoid unnecessary double posts.
2 Likes
- Use
THREE.Plane()andTHREE.Raycaster()to set points of a polygon - Use those points to create an instance of
THREE.Shape() - Use the shape to create
THREE.ExtrudeBufferGeometry()
5 Likes
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?
@Yash_Joshi
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.
3 Likes
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. 
By the way, @prisoner849 has posted a related jsfiddle that uses some of the functionality you will need: https://jsfiddle.net/prisoner849/snyqgmke/
2 Likes
I made something similar in the past
https://jsfiddle.net/prisoner849/uc1Ldb14/
Click the plane 5 times: 4 are for setting points, the 5th is to extrude the resulted polygon.
13 Likes
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 https://jsfiddle.net/meL5s1kf/2/ 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! 
7 Likes
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 
https://jsfiddle.net/meL5s1kf/2/
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.
3 Likes
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