I am trying to make a 3D application and want as much customization as possible. I just want to know if it is possible to Create UV unwrapping for any Geometry in Three.js
Of course you are free to generate uv coordinates for your geometries. But the wrapping algorithm is something you have to implement by yourself.
Okay 1. Is there anywhere i could read about it and secondly would the UV coordinates be transformed to pictures just as 3D modelling software does it ?
- Sry, I don’t know any references about such algorithms.
- What do you mean with “transformed to pictures”? Can you please explain a bit?
In Blender, when a model is unwrapped, the unwrapping can be saved as an image file and exported to any other software.
Probably the simplest method to achieve this would be to use the GLTFExporter, then import your model into blender and do the unwrapping there.
This is a fascinating and vast topic and hoping one day to see unfolding/unwrapping exist within Three.js, here are my findings:
Indexed my brain for a day to remember Stemkowski’s: Sphere Unwrapping
Isn’t UV unfolding per se, i researched in much of 2017 and found these items:
If it exists i’m sure it is buried within a research/github project
What I do know you are after exists within Blender:
LSCM = Least-squares conformal mapping
ABF++ = Angle Based Flattening
ARAP = As-rigid-as-possible
You will also learn about pelting, harmonic mapping, the intriguing world of papercraft!
I’ve saved many findings over time related to UV unwrapper/unfold, here are a few to share:
- Pepakura = hands down the ultimate UV unwrapper/unfold tool for papercrafting
- Ultimate Unwrap 3D
- ArmorSmith = Costume designer with Blender
- Rizom Unfold 3D = hands down the ultimate UV unwrapper/unfold tool in general
What I think @eshiett1995 meant by “transformed to pictures” = a texture packer
4 Likes
I believe most automatic UV unwrapping algorithms do not produce very good results as it will often result in both bad seams and stretching. This is why one generally learns in e.g. Blender to manually add the seams to take more control of the automatic unwrapper.
3 Likes
This happened in 2016 to Blender:
- SLIM = Scalable Locally Injective Mappings
- Parameterization
- Removes distortion over iterations
- exists within Blender 3D
1 Like
I agree with @John_Christian_Lonningdal
UV unwrapping is more of a modellers job. When i do the UV mapping in C4D i only define the “cutting lines”, the rest gets automatically relaxed and placed though. Especially on complex characters i don’t see how a algorithm can manage it reasonable without any hints what which part is.
Came across this item in 2017 called WrapR for Trimble Sketchup
Here is the video
What I really liked about WrapR is the smart edge loop/smart paths, which is something someone in hopefully the near future will accomplish with Three.js!
Unless someone already knows or has an example they could share with the community?
This is basically exactly how it works in C4D.
Without diverting from Three.js entirely you can always learn the built-in UV unwrapping tool to C4D or with a C4D plugin I found through google. If you have a known plugin that is even better please do share, would only help our Three.js community.
UV unwrapping, mapping and other UV related stuff in Cinema 4D
UV Vonc UV Plugin for Cinema 4D
So Ben are you saying that, my best option is to unwrap the texture in a modelling tool like C4D and apply the texture image to my mesh via three.js ?
Correct
Remember it is what works for you, alot of 3D applications have some way of doing unwrapping. Blender 3D has some of the most powerful algorithms because they come out of a lab from Zurich: ETH and IGL(Interactive Geometry Lab) is another key player and then you’ll discover the same algorithms being applied just about everywhere that’s the beauty of Blender 3D being open-source! Why reinvent the wheel?
UV unwrapping can be at times very computational heavy that is more than likely why we don’t see this being done directly in Three.js. Unless the calculations were done in the cloud for Three.js.
A tool containing similar UV unwrapping tools like Blender 3D = 3DCoat scroll to the very bottom of this page to discover what 3DCoat can do with UV Mapping
If you are more into PBR authoring i’d recommend having a look at Substance Designer I have a friend that uses this with Unity
truth is that i am trying to replicate this (https://www.tailorstore.com/uniform-shirt-designer) with three.js, how possible is it? can i do a better work with threejs
Anyone can make a better product depends how much extra time he/she is willing to put into a project to get the desired result!
I know your asking for a recommendation and I may not be the best qualified for this because I’m still learning as well. To where Three.js is now alot is possible in what you are requesting but I wouldn’t say better job more if it is possible.
What does a better job is the approach = application architecture. Trying to do 100% Three.js i’m thinking is possible that is if your fans don’t sound like a jet airplane towards the end of your project.
By better i mean = how realistic the shirt designs would look. i saw this shirt design (https://www.turbosquid.com/3d-models/3d-3ds-shirt-chekmate-ready-set/1023345) it is a 3d model and it looks more realistic than the site i showed you. But my issue is can three.js render a very detailed model like that ? and secondly how would I be able to make almost every part of the shirt configurable ?
1 Like
This article will give you an idea what you will need to do to accomplish what your after.
Was done using Blender 3D: reference my comment because I was curious as well long ago!
thanks Ben, are you on skype by the way?