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!
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!
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 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.
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
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!
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
.