# How to use UVs in ShapeBufferGeometry?

I create a geometry from Bezier curves, like so:

`````` function makeGeom(curves) {
let threeShape = new THREE.Shape();
for (let c = 0; c < curves.length; c++) {
var bez = curves[c];
threeShape.moveTo(bez.x[0], bez.y[0]);
threeShape.bezierCurveTo(bez.x[1], bez.y[1], bez.x[2], bez.y[2], bez.x[3], bez.y[3]);
}
return new THREE.ShapeBufferGeometry(threeShape);
}
...
makeGeom([
{ x: [53.65, 169.75, 73, 138.15], y: [-51.8, -7.2, -67.5, -51.8] },
{ x: [138.15, 138.15, 138, 138], y: [-51.8, -51.8, -65.5, -65.5] },
{ x: [138, 125.45, 53.65, 53.65], y: [-65.5, -74.85, -135.3, -135.3] },
{ x: [53.65, 53.65, 53.65, 53.65], y: [-135.3, -135.3, -51.8, -51.8] }])
``````

``````<script type="x-shader/x-vertex" id="vert_uv">
out vec2 ouv;
void main() {
ouv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
</script>

in vec2 ouv;
void main()
{
gl_FragColor = vec4(ouv.x, 0.0, ouv.y, 1.0);
}
</script>
``````

Judging by the look of it, UVs do not change across the shape, I’m not sure why.

Here is the fiddle:
https://jsfiddle.net/tfoller/k1djytpf/36/

Hi!
Have a look at this post and whole topic: Texture on dynamically created object

1 Like

Thank you, unfortunately, I don’t understand the idea behind your code, I see that it calculates UVs across the surface but why do you use quaternions and recalculate geometry points?

The part, that you need, is here:

``````var box = new THREE.Box3().setFromObject(mesh);
var size = new THREE.Vector3();
box.getSize(size);
var vec3 = new THREE.Vector3(); // temp vector
var attPos = mesh.geometry.attributes.position;
var attUv = mesh.geometry.attributes.uv;
for (let i = 0; i < attPos.count; i++){
vec3.fromBufferAttribute(attPos, i);
attUv.setXY(i,
(vec3.x - box.min.x) / size.x,
(vec3.y - box.min.y) / size.y
);
}
``````

Yes, I understood that part, I was curious about the rest of it.

Anyway, I figured out how to do different gradients on shapes, so I’ll leave a fiddle here in case somebody finds it useful.

1 Like