Updating UV coordinates of BufferGeometry

Questions
,
1

I’m looking for some advice on how to properly update UV coordinates for a BufferGeometry which has been morphed.

What I’m trying to achieve is planar mapping of a texture (as though it’s projected down on the y axis), and when the object morphs the texture stays still and the object slides underneath it.

My thought was to use each vertices’ X,Z world position for it’s UV values, but this is my first attempt to work with BufferGeometry and I haven’t even been able to figure out how to modify the UV values.

Any pointers on how I might accomplish something similar to this effect?

test

1 Like
2

Try it like so:

var uvAttribute = geometry.attributes.uv;
		
for ( var i = 0; i < uvAttribute.count; i ++ ) {
		
    var u = uvAttribute.getX( i );
    var v = uvAttribute.getY( i );
			
    // do something with uv

    // write values back to attribute
			
    uvAttribute.setXY( i, u, v );
		
}

For debugging a small live demo: Edit fiddle - JSFiddle - Code Playground

3

Thank you! That was a great nudge in the right direction. I can now see that the UV values are indeed getting modified in the buffer array, but even with .uvsNeedUpdate = true, I’m not seeing them change visually. Any ideas what I’m missing?

Here is an example: https://jsfiddle.net/wgt9po7b/

4

You are working with BufferGeometry so you have to do this: uvAttribute.needsUpdate = true;.

https://jsfiddle.net/9xy4k1o0/

1 Like
5

Thank you so much, perfect! I would surely have gone over it far too many times times before catching that.