Hello, I’m trying to texture map a CapsuleGeometry, but the center pixels/uvs are stretched.

I would like to rewrite the uvs in order to make it look like this: https://codepen.io/behreajj/pen/oNxpXpg

Any ideas?

Thanks

You could use their “createCapsule” function… or to do a cylinder unwrap on your own CapsuleGeometry, something like:

```
let pa=geometry.attributes.position.array;
let uva = geometry.attributes.uv.array;
for(let i=0,j=0;i<pa.length;i+=3,j+=2){
let vx=pa[i];
let vy=pa[i+1];
let vz=pa[i+2];
let u = Math.atan2(vx,vy);
let v = vz;
uva[j]=u;
uva[j+1]=v;
}
```

Thanks, I’m trying to recalculate the uvs, but I don’t know how.

Your example doesn’t works as I expect.

Yeah the code i typed out there is trying to recompute Uvs, but I didn’t actually test it.

Just showing how you can access Uvs right after a geometry is created, and modify them.

If you post a fiddle/codepen/glitch of what you have now with the capsule, we can prolly modify it to show u…

yeah, the UV remapping isn’t trivial.

For the moment, I’m using this GitHub - maximeq/three-js-capsule-geometry: A CapsuleBufferGeometry as a new geometry primitive for THREE.JS.

But it doesn’t get the Vs right.

right. the code I linked is meant to show you how you can examine/modify the vertices/uvs to do what you need…

Make a fiddle with your capsule as it is now and we can show u how to Cylinder Unwrap it like u need.

Or… just use the createCapsule method that u linked in the codepen

Just rewrite them. I do not get what is the problem, so it is hard to give any specific advice. Possible problems are: (1) you have issues changing v-coordinates; (2) you have issues calculating good values for v-coordinate; (3) you calculate and change v-coordinates, but nothing is changed on the screen, etc. etc.

Could you share your attempt in CodePen (or a similar online system)?

With just 3 lines of code it is possible to make the irregularly stretched capsule into somewhat regularly stretch capsule. Like this:

How did you do it?,

I don’t know the formula to compute the UV.

fun get_uv(posx, posy, posz)

I’ll try to get an example later.

My best attempt was this;

let s = new three.Spherical()

s.setFromCartesianCoords(x, y, z)

s.makeSafe()

let u = rescale(s.theta, (-Math.PI), Math.PI, 0, 1)

let v = rescale(s.phi, 0, Math.PI, 1, 0)

But I don’t like the results

The problem is that Three.js doesn’t create vertex/position values for the torso. So you can’t do anything about it.

My solution is to use GitHub - maximeq/three-js-capsule-geometry: A CapsuleBufferGeometry as a new geometry primitive for THREE.JS instead.

For the record, for a CapsuleBufferGeometry(1, 1, 1, 25, 25, 10, 10), this UV remapping works for me:

let yy = rescale(y, -1.5, 1.5, 0, 1)

if(yy <= 0.25)

v = yy

if(yy > 0.25 && yy < 0.75)

v = rescale(yy, 0.25, 0.75, 0 0.5) + 0.25

if(yy >= 0.75)

v = yy

It’s good you found a solution that works for you. Here is mine:

https://codepen.io/boytchev/pen/vYqyBBL

The uv are fixed in lines 53-55:

```
var pos = earthGeometry.getAttribute( 'position' );
var uv = earthGeometry.getAttribute( 'uv' );
for( var i=0; i<pos.count; i++ ) uv.setY( i, pos.getY(i)/2+0.5 );
```