# ConvexGeometry and texture issue

**URL:** <https://discourse.threejs.org/t/convexgeometry-and-texture-issue/40466>\
**Category:** Questions\
**Tags:** textures, geometry\
**Created:** [July 18, 2022, 7:20pm UTC](https://discourse.threejs.org/t/convexgeometry-and-texture-issue/40466 "2022-07-18T19:20:39Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stortof](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/stortof/32/28106_2.png) [@Stortof](https://discourse.threejs.org/u/Stortof)\
**Post date:** [July 18, 2022, 7:20pm UTC](https://discourse.threejs.org/t/convexgeometry-and-texture-issue/40466/1 "2022-07-18T19:20:39Z")

</div>

Hi there,

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

```javascript
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](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](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.

---

<div class="post-metadata">

**Author:** ![tfoller](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@tfoller](https://discourse.threejs.org/u/tfoller)\
**Post date:** [July 19, 2022, 5:52am UTC](https://discourse.threejs.org/t/convexgeometry-and-texture-issue/40466/2 "2022-07-19T05:52:56Z")

</div>

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 **uv** s 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.

---

<div class="post-metadata">

**Author:** ![Stortof](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/stortof/32/28106_2.png) [@Stortof](https://discourse.threejs.org/u/Stortof)\
**Post date:** [July 19, 2022, 9:53am UTC](https://discourse.threejs.org/t/convexgeometry-and-texture-issue/40466/3 "2022-07-19T09:53:58Z")

</div>

Thanks for you help tfoller,

I made a codepen example here: [https://codepen.io/Megametrope/pen/XWEMzEq](https://codepen.io/Megametrope/pen/XWEMzEq)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 19, 2022, 11:38am UTC](https://discourse.threejs.org/t/convexgeometry-and-texture-issue/40466/4 "2022-07-19T11:38:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Stortof](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/stortof/32/28106_2.png) [@Stortof](https://discourse.threejs.org/u/Stortof)\
**Post date:** [July 19, 2022, 11:50am UTC](https://discourse.threejs.org/t/convexgeometry-and-texture-issue/40466/5 "2022-07-19T11:50:34Z")

</div>

> [@Mugen87](#):
>
> generate texture coordinates

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

---

<div class="post-metadata">

**Author:** ![tfoller](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@tfoller](https://discourse.threejs.org/u/tfoller)\
**Post date:** [July 19, 2022, 12:02pm UTC](https://discourse.threejs.org/t/convexgeometry-and-texture-issue/40466/6 "2022-07-19T12:02:26Z")

</div>

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

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

```

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/tfoller/bk1evywg/65/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

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.

---

<div class="post-metadata">

**Author:** ![Stortof](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/stortof/32/28106_2.png) [@Stortof](https://discourse.threejs.org/u/Stortof)\
**Post date:** [July 19, 2022, 12:15pm UTC](https://discourse.threejs.org/t/convexgeometry-and-texture-issue/40466/7 "2022-07-19T12:15:11Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 19, 2022, 12:18pm UTC](https://discourse.threejs.org/t/convexgeometry-and-texture-issue/40466/8 "2022-07-19T12:18:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Stortof](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/stortof/32/28106_2.png) [@Stortof](https://discourse.threejs.org/u/Stortof)\
**Post date:** [July 19, 2022, 12:27pm UTC](https://discourse.threejs.org/t/convexgeometry-and-texture-issue/40466/9 "2022-07-19T12:27:41Z")

</div>

OK I see.  
Thanks again for your help!

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 19, 2022, 1:49pm UTC](https://discourse.threejs.org/t/convexgeometry-and-texture-issue/40466/10 "2022-07-19T13:49:23Z")

</div>

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