How do I wrap object around a cylinder in ThreeJS?

First of all, this shrinkwrap thread seems like what you’re looking for?


If not, and assuming both objects are 3D meshes (if one is 2D, just use decals) - you can curve any “flat” shape around an arbitrary cylinder / sphere in the vertex shader - example (try modifying “Alpha” in top-right.)

As in lines 103-105 in the codepen - pretty much all you need to do is multiply the vertex position of one axis by sin / cos of a position on another axis.

Alternatively - you can also offset the vertices away from the center of the model - so that the distance between each vertex and the center, on the x/z plane, is equal to the radius of your cylinder.

But the final solution depends on how you prepare the original models - just like in Blender, there’s no single solution that’d fit all types of geometries - you need to test different modifiers / wrap methods / parameter configurations.

3 Likes