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

WestLangley WestLangley · Accepted Answer · 2013-10-04T15:05:57

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

How to texture a three.js Mesh created with ShapeGeometry

1 Answers