How to use UVs in ShapeBufferGeometry?

Questions
,
1

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] }])

here are my shaders:

<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>

<script type="x-shader/x-fragment" id="frag_RadialGradient">
    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/

2

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

1 Like
3

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?

4

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
  );
}
1 Like
5

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.

shape_bg

1 Like