Texture Stretching When Changing Geometry Width

Questions
, ,
1

Hi everyone,

I’m working on a Three.js project where I need to dynamically change the width of a geometry. I have a function that modifies the width successfully, but I’m encountering an issue where the texture applied to the geometry gets stretched when the width changes.

Screenshot 2024-05-21 at 18.47.03
Screenshot 2024-05-21 at 18.47.031110×1066 89 KB

`

Here’s the function I’m using to change the width:

function setGeometryWidth(widthChange, pos, geometry) {
  const position = geometry.getAttribute("position");
  const vertex = new THREE.Vector3();

  for (let i = 0; i < position.count; i++) {
    vertex.fromBufferAttribute(position, i);

    if (vertex.x < pos) {
      vertex.x -= widthChange;
      position.setXYZ(i, vertex.x, vertex.y, vertex.z);
    }
  }

  position.needsUpdate = true;
}

While this works for changing the width, the texture mapped onto the geometry stretches, which is not the desired effect.

Does anyone know how I can modify the geometry’s width without stretching the texture? Any advice or pointers would be greatly appreciated!

Thanks in advance for your help!`

2

I’m not sure if you can do this dynamically, but will changing the repeat value of the texture give you the result you are looking for? This would require you to have a tileable texture. If you don’t want the texture to always start on the left side you might be able to change the texture offset value - perhaps have it in the center of the geometry.

1 Like
3

take a look at this post

3 Likes