Hi,
Blender has a modifier called shrinkwrap - basically you can statically deform a mesh around another mesh as if it was shrinkwrap (hence the name.) This is especially useful for wrapping clothing around a character and I was wondering if there is something similar in three.js.
I’m fairly new to three.js and so I’m sorry if I’ve missed something obvious. I looked around for quite a while but couldn’t find anything. If there’s not something I can use that already has this functionality, could somebody help point me in the right direction for how I can manipulate individual vertices (using the technique described in the Blender page above?)
Thanks a lot!
Did some more research but still came up with nothing - anybody have any ideas?
I haven’t seen any example of this, so you might have to get your hands dirty and write it yourself. This sounds like a pretty advanced operation, but I figure you could iterate through each vertex position and perform a Raycast towards the center of the “mold” shape. Once it hits the mold, you can change the vertex position to the resulting intersection point. Or at least 99% of the way between starting and intersecting position, so you don’t run into z-fighting issues.
If you have a bit more information on what you’re trying to do it would be helpful but from the blender docs it sounds like the tool moves each vertex to the closest point on the target mesh:
Nearest Surface Point
This will select the nearest point over the surface of the shrunk target.
You could use the three-mesh-bvh package I maintain which includes a function to find the closest point on a geometry surface to another point and does it quickly (see the closestPointToPoint function). You could run it for every vertex on the mesh you want to deform and that may get you something like what Blender sounds like it’s doing. I’m unfamiliar with the Blender tool, though. The library would help with a raycasting approach, too, if brute force is too slow.
4 Likes
Thanks for the ideas guys 
@gkjohnson I’m trying to take a clothing item (like a shirt that is in a neutral position) and fit it onto another mesh (a character.) The characters are randomly generated and have different body shapes. What you described sounds like what I’m looking for, but I’m a little confused on how I’d get that working in practice…
Here’s an example of how it works in Blender. Hopefully it makes sense!
@marquizzo Not sure how advanced it is, but that does sound like it could be a good way to go about it.
Here’s an example of how it works in Blender . Hopefully it makes sense!
From the first part of that video it looks like what I described.
I’m a little confused on how I’d get that working in practice…
You’d have to iterate over all the vertices, find the closest point on the surface of the target (human) model, then that vertex to the closest point found. The BVH class referenced above is an acceleration structure for making this kind of spatial query much faster and already includes a function for finding the closest point. The docs and examples should show how to create a BVH and query it directly – it’s likely there isn’t anything that will “just work” for the type of geometry manipulation you’re talking about here.
1 Like
I always understood the Blender shrink wrap to be similar to the Threejs convex geometry class.
ConvexGeometry : three.js docs
Below is an example of using the shrinkwrap modifier in Blender to wrap an icosphere around the suzanne monkey head.
Here is similar example in Three.js using the ConvexGeometry class.
Source code : Convex Geometry - Three.js Tutorials
