Can I make a UV unwrapping of a model Programmatically with Three.js

uv-mapping

#1

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


#2

Of course you are free to generate uv coordinates for your geometries. But the wrapping algorithm is something you have to implement by yourself.


#3

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 ?


#4
  1. Sry, I don’t know any references about such algorithms.
  2. What do you mean with “transformed to pictures”? Can you please explain a bit?

#5

In Blender, when a model is unwrapped, the unwrapping can be saved as an image file and exported to any other software.


#6

Probably the simplest method to achieve this would be to use the GLTFExporter, then import your model into blender and do the unwrapping there.


#7

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:

  • UV Tests = Three.js example
  • PolyTool = find cells in a given .obj mesh using Three.js

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:

  1. Pepakura = hands down the ultimate UV unwrapper/unfold tool
  2. Ultimate Unwrap 3D
  3. ArmorSmith = Costume designer with Blender

What I think @eshiett1995 meant by “transformed to pictures” = a texture packer


#9

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.


#10

This happened in 2016 to Blender:

  • SLIM = Scalable Locally Injective Mappings
  • Parameterization
  • Removes distortion over iterations
  • exists within Blender 3D

#11

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.


#12

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?


#13

This is basically exactly how it works in C4D.


#14

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