ConvexGeometry and texture issue

Hi there,

I am creating a custom Mesh with points to position an overlay screen in a 360 panorama using ConvexGeometry

var vertices:Array<Vector3> = [     
                                  new Vector3(-483.18945494559256, -21.248702500252314, 160.0899894624876),
                                  new Vector3(-482.4577972469297, -25.581141422076243, -161.52168655050198),
                                  new Vector3(-436.77666672599617, -205.92662314104163, 161.3256245628837),
                                  new Vector3(-454.3073193376171, -222.87828173610987, 57.92799592915939),
                                  new Vector3(-433.85443685376515, -220.1460046396674, -150.67149462410754)

const convexGeometry:ConvexGeometry = new ConvexGeometry( vertices );

const texture:Texture = new TextureLoader().load( './images/tactile.jpg' );

const material:MeshLambertMaterial = new MeshLambertMaterial( {map: texture } );

const mesh:Mesh = new Mesh( convexGeometry, material );

this.add( mesh );

And I have some problem with the texture that does not match the mesh…

Expected result :
Current display (a full color that is part of the image) :

Is there a way to make texture size matching the mesh size or do I am missing something?

Thanks for your help.

Usually geometry contains uv attribute for each point that controls the sampling of the texture and uv numbers should run from 0 to 1 each across the geometry surface.

Check uvs for your geometry or provide a working example of your code online in jsfidde or codepen so other people could check what’s going on.

1 Like

Thanks for you help tfoller,

I made a codepen example here:

ConvexGeometry does not generate texture coordinates. Just the position and normal data.

Is there a way to generate manually texture coordinates to fit the mesh size?

I added uvs manually for you to see at least something on your geometry:

const uv = [
  0, 0, 
  1, 0,
  1, 1,
  1, 1,
  0, 1
 convexGeometry.setAttribute('uv', new THREE.Float32BufferAttribute(uv, 2)); 

Figuring this out manually might not be worth your time, is easier to use some 3D software like blender to do the uv unwrapping for your geometry - then you can either lift those uvs and put manually in your code or import your full model.


I see the problem now.
Is there a formula or any way to get the right UV from the vertices used to create the Mesh?

Generating texture coordinates is a complex problem. For certain geometries like boxes or spheres they can be easily computed analytically. For all other shapes texture coordinates are normally authored in a DCC tool like Blender.

UV unwrapping algorithms often provide non-optimal results so manual adjustments are inevitable.

OK I see.
Thanks again for your help!

Maybe export convex to blender, set uv and export to three.js and apply to convex uv from blender