How to texture a three.js Mesh created with ShapeGeometry

Question

I'm trying to place a bitmap texture material on a Mesh created from a three.js ShapeGeometry.

The geometry is a simple octagon (i'll eventually add curves to make it a rounded rectangle).

The Mesh is created and displays just fine, except that the bitmap texture shows as four huge squares, which seems to be super-duper low-resolution version of the loaded image.

Here's what it looks like:

(The loaded image is actually a 512x512 pic of the French flag)

How can I get the texture to use the full resolution of the loaded image? (BTW, this texture works fine when applied as a material to a Mesh made from a THREE.PlaneGeometry.)

Here's my code...

var shape = new THREE.Shape();
shape.moveTo(-width/2 + radius, height/2);
shape.lineTo(width/2 - radius, height/2);
shape.lineTo(width/2, height/2 - radius);
shape.lineTo(width/2, -height/2 + radius);
shape.lineTo(width/2 - radius, -height/2);
shape.lineTo(-width/2 + radius, -height/2);
shape.lineTo(-width/2, -height/2 + radius);
shape.lineTo(-width/2, height/2 - radius);
shape.lineTo(-width/2 + radius, height/2);
var myGeometry = new THREE.ShapeGeometry( shape );

var myMesh = new THREE.Mesh(myGeometry, myMaterial);

Thanks!!!

Answer 1

THREE.ExtrudeGeometry.WorldUVGenerator is the default UV generator for THREE.ShapeGeometry .

This default UV generator sets the UVs to equal the vertex coordinates.

You need to pass in your own UV generator to THREE.ShapeGeometry . See the source code for how that works.

A work-around is to scale up your model parameters by a factor of say, 10, and then compensate by setting mesh.scale.set( 0.1, 0.1, 1 ) .

A third option is to adjust your shape geometry so its vertices cover the [ 0, 1 ] range - then apply mesh.scale if you want.

three.js r.61