Rendering a texture for RingGeometry

base on threejs v155
I have a texture like this :

I want to make it like this:


but the result:

let whiteArrowMaterial = new THREE.MeshBasicMaterial({
    map: whiteArrowTexture,
    side: THREE.DoubleSide,
});
let ringGeometry = new THREE.RingGeometry(5, 10, 32, 1, 0);
tankRing = new THREE.Mesh(ringGeometry, whiteArrowMaterial);
//  I try this code 
var pos = ringGeometry.attributes.position;
var v3 = new THREE.Vector3();
for (let i = 0; i < pos.count; i++){
    v3.fromBufferAttribute(pos, i);
    ringGeometry.attributes.uv.setXY(i, v3.length() < 4 ? 0 : 1, 1);
}
// 

get this result:

You can generate radial UVs like this:


for (let i = 0; i < pos.count; i++){
    v3.fromBufferAttribute(pos, i);
  let u = Math.atan2(v3.x,v3.y);
  let v = v3.length() * .2; //need scale factor based on ring thickness...
    ringGeometry.attributes.uv.setXY(i, u,v);
}

But this shows another issue which is that the ring geometry is continuous… so the last segment in the ring loops back through the entire texture… and if you want the texture to animate across the ring… you’ll have to generate your own ring geometry… which isn’t too bad… I’ll see if I can throw that in a glitch… (oops I was wrong… this isn’t the issue… it’s the way im doing atan2 calc… )…

edit2: ok i fixed it by changing the ring geometry construction to start at a different angle and now it works since the atan2 sign flip is right at the seam.:

let ringGeometry = new THREE.RingGeometry(5, 10, 32, 1, Math.PI*-.5,Math.PI*2);

Here’s the glitch: Glitch :・゚✧

Look at the bottom of “script.js”

1 Like

2 Likes

I’d also try a very flat open-ended truncated cone. It should have polar UVs by design. Rotation would be either via rotating the cone, or via changing the texture offset.

2 Likes

Oh that’s actually much simpler :slight_smile: didn’t think of that. :smiley: O well, it was fun anyway… and this generalizes for other geometries. radialize all the things!

edit: Here’s the CylinderGeometry version :smiley: :

let g2 = new THREE.CylinderGeometry(5,10,0,256,1,true)

cylinder is the flat one:

2 Likes

nice ! thks very much!

1 Like