# Is it possible to do a dress-up drag and drop 3D game with Three.JS?

**URL:** <https://discourse.threejs.org/t/is-it-possible-to-do-a-dress-up-drag-and-drop-3d-game-with-three-js/67567>\
**Category:** Questions\
**Tags:** game-dev\
**Created:** [July 1, 2024, 5:28pm UTC](https://discourse.threejs.org/t/is-it-possible-to-do-a-dress-up-drag-and-drop-3d-game-with-three-js/67567 "2024-07-01T17:28:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![cinnamonlamb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cinnamonlamb/32/49445_2.png) [@cinnamonlamb](https://discourse.threejs.org/u/cinnamonlamb)\
**Post date:** [July 1, 2024, 5:28pm UTC](https://discourse.threejs.org/t/is-it-possible-to-do-a-dress-up-drag-and-drop-3d-game-with-three-js/67567/1 "2024-07-01T17:28:53Z")

</div>

Hello everyone.  
I am an undergrad cs student, and recently i found out about three.Js and became very interested. For my finals apresentation i wanted to do a kind of “dress up” game with drag and drop interactions, and before i started to learn Three.Js i wanted to know if this is actually possible to do.

It would be something like this: A sidebar menu where the user can choose multiple types of body parts and clothes (choose from different heads, eyes, mouths, dresses, shirts, accesories and etc) and on clicking it, it would generate the 3D piece of it on its respective place (static model, not able to change models pose or place). I also wanted only the accessories to be place changed by drag and drop, so i could put a hairclip anywhere on the hair and etc.

Is this even possible to do?? I thank you all from the community in advance!!  
Before someone says that it should be better to do it on a gamedev tool, the thing is that i wanted to do it in three js so it would fit the “Computer Science” theme better!

---

<div class="post-metadata">

**Author:** ![Omar\_Shehata](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/omar_shehata/32/43576_2.png) [@Omar\_Shehata](https://discourse.threejs.org/u/Omar_Shehata)\
**Post date:** [July 1, 2024, 5:33pm UTC](https://discourse.threejs.org/t/is-it-possible-to-do-a-dress-up-drag-and-drop-3d-game-with-three-js/67567/2 "2024-07-01T17:33:27Z")

</div>

> [@cinnamonlamb](#):
>
> Is this even possible to do?? I thank you all from the community in advance!!

yes, it is!

> [@cinnamonlamb](#):
>
> i wanted to do it in three js so it would fit the “Computer Science” theme better!

I did the same for my undergrad thesis, making a project in ThreeJS even though it might have been easier in a game engine, but I learned a lot and that helped me a lot in job interviews, so, this is a good plan!

---

<div class="post-metadata">

**Author:** ![Omar\_Shehata](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/omar_shehata/32/43576_2.png) [@Omar\_Shehata](https://discourse.threejs.org/u/Omar_Shehata)\
**Post date:** [July 1, 2024, 5:36pm UTC](https://discourse.threejs.org/t/is-it-possible-to-do-a-dress-up-drag-and-drop-3d-game-with-three-js/67567/3 "2024-07-01T17:36:42Z")

</div>

> [@cinnamonlamb](#):
>
> clicking it, it would generate the 3D piece of it on its respective place (static model, not able to change models pose or place).

this part is the easiest. The way you would do this is simply design the model (in Blender, or other tools, there is also [three.js editor](https://threejs.org/editor/) if you have multiple models and want to just position them together), and then hide them. And programmatically toggle them when the user clicks on the 2D buttons.

> [@cinnamonlamb](#):
>
> I also wanted only the accessories to be place changed by drag and drop

this is harder, but you would do this by ray casting (as the user moves the mouse, you cast a ray from the screen into the 3D scene, to see where the 3D position is, to place the hairclip there).

there’s a bunch of raycasting examples on the ThreeJS demos, see here for example: [three.js examples](https://threejs.org/examples/?q=raycast#webgl_interactive_lines)

As you work on this I would recommend setting up your project on Glitch / CodeSandbox / GitHub so that it is easy to ask questions on this forum and provide people with your code so they can take a look and point you in the right direction/answer your questions!

---

<div class="post-metadata">

**Author:** ![cinnamonlamb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cinnamonlamb/32/49445_2.png) [@cinnamonlamb](https://discourse.threejs.org/u/cinnamonlamb)\
**Post date:** [July 3, 2024, 1:51pm UTC](https://discourse.threejs.org/t/is-it-possible-to-do-a-dress-up-drag-and-drop-3d-game-with-three-js/67567/4 "2024-07-03T13:51:03Z")

</div>

Thank you so much for the answer!! This really gave me a good direction of where to go and what to do. I will surely include a github repo link on my next question. Tysm  
.

---

<div class="post-metadata">

**Author:** ![agargaro](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/agargaro/32/35529_2.png) [@agargaro](https://discourse.threejs.org/u/agargaro)\
**Post date:** [July 3, 2024, 1:56pm UTC](https://discourse.threejs.org/t/is-it-possible-to-do-a-dress-up-drag-and-drop-3d-game-with-three-js/67567/5 "2024-07-03T13:56:57Z")

</div>

Hi, I wrote a library that might help you, especially with drag and drop:

> **[three.ez - Drag & Drop - StackBlitz](https://stackblitz.com/edit/three-ez-drag-drop?file=src%2Fmain.ts)**
>
> Implements drag and drop handling and related events by adding two properties to each Object3D:
> \- draggable: makes an object draggable.
> \- findDropTarget: determines whether intersections with drop targets will be checked during dragging.
> The drag can...

> **[GitHub - agargaro/three.ez: Simplify three.js development, including events,...](https://github.com/agargaro/three.ez)**
>
> Simplify three.js development, including events, drag & drop, binding, focus management, smart rendering, tweening and more. - agargaro/three.ez