# Draw walls using mouse in threejs

**URL:** <https://discourse.threejs.org/t/draw-walls-using-mouse-in-threejs/49347>\
**Category:** Questions\
**Tags:** camera, animation, materials, geometry\
**Created:** [March 20, 2023, 5:15pm UTC](https://discourse.threejs.org/t/draw-walls-using-mouse-in-threejs/49347 "2023-03-20T17:15:52Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mohamad\_chouacha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mohamad_chouacha/32/34568_2.png) [@mohamad\_chouacha](https://discourse.threejs.org/u/mohamad_chouacha)\
**Post date:** [March 20, 2023, 5:15pm UTC](https://discourse.threejs.org/t/draw-walls-using-mouse-in-threejs/49347/1 "2023-03-20T17:15:52Z")

</div>

Hi I would like to know how to create rectangle in the 2D using mouse and extrude it in 3D adding the measurment of the walls as used in autocad in anyway I want drawing to be like this

 ![wall in 3D](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/b/eb72731d225e49bd75d41c0dcef5d8d3bce53f31.jpeg).  
Thank you

---

<div class="post-metadata">

**Author:** ![eze](https://avatars.discourse-cdn.com/v4/letter/e/e79b87/32.png) [@eze](https://discourse.threejs.org/u/eze)\
**Post date:** [March 21, 2023, 6:08am UTC](https://discourse.threejs.org/t/draw-walls-using-mouse-in-threejs/49347/2 "2023-03-21T06:08:38Z")

</div>

This function is very useful

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 21, 2023, 7:52am UTC](https://discourse.threejs.org/t/draw-walls-using-mouse-in-threejs/49347/3 "2023-03-21T07:52:55Z")

</div>

you need to implement a basic sketcher, that is no small feat.

an event system with support for drag-n-drop, bubbling and pointer capture is a requirement

> **[angry-tesla-yuyr6z - CodeSandbox](https://codesandbox.io/s/angry-tesla-yuyr6z)**
>
> angry-tesla-yuyr6z by drcmda using @react-three/drei, @react-three/fiber, @types/three, react, react-dom, react-scripts, three

as well as being able to merge geometries with booleans

> **[CSG house - CodeSandbox](https://codesandbox.io/s/csg-house-y52tmt)**
>
> CSG house by drcmda using @react-three/csg, @react-three/drei, @react-three/fiber, @react-three/postprocessing, @types/three, leva, react, react-dom, react-scripts

and a way to measure

> <https://twitter.com/lnpepper/status/1499472180291125254>

at that scale doing it in vanilla is imo pointless. you’d be spending half the time on the event system alone. with react + three it would be relatively simple, you “just” need to extend the sandboxes above.

at work we’re building something like this but it is a real CAD sketcher with constraints and all, nothing that i could just copy and paste.

> <https://twitter.com/0xca0a/status/884851478380150785>

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 21, 2023, 8:06am UTC](https://discourse.threejs.org/t/draw-walls-using-mouse-in-threejs/49347/4 "2023-03-21T08:06:08Z")

</div>

ps, the sketcher above is available as a drop in component, the whole CAD suite is: [https://buerli.io](https://buerli.io) if you want CAD in the browser buerli might be a real option. it’s currently in beta.