ConvexGeometry and texture issue

Questions
,
1

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 : https://i.stack.imgur.com/Z3wFz.png
Current display (a full color that is part of the image) : https://i.stack.imgur.com/dpLtL.png

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

Thanks for your help.

2

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
3

Thanks for you help tfoller,

I made a codepen example here: https://codepen.io/Megametrope/pen/XWEMzEq

4

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

5

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

6

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.

7

Thanks!

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?

8

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.

9

OK I see.
Thanks again for your help!

10

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