# Polygon & texture
**URL:** https://discourse.threejs.org/t/polygon-texture/1275
**Category:** Questions
**Tags:** custom-geometry, geometry
**Created:** [November 24, 2017, 7:47am UTC](https://discourse.threejs.org/t/polygon-texture/1275 "2017-11-24T07:47:41Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@shakipete](https://discourse.threejs.org/u/shakipete)
#### Post date: [November 24, 2017, 7:47am UTC](https://discourse.threejs.org/t/polygon-texture/1275/1 "2017-11-24T07:47:41Z")
I am building a customized shape that x,y,z are given by external program
then I need to add a texture to this shape
the only way I found is to use Face3
but the Face3 manages a triangle
which makes my texture ugly
how can I set a texture in a customized shape with several (more than 3) sets of points ?
thx for your help (sorry for my bad English, I am French)
---
### Author:  [@prisoner849](https://discourse.threejs.org/u/prisoner849)
#### Post date: [November 24, 2017, 8:53am UTC](https://discourse.threejs.org/t/polygon-texture/1275/2 "2017-11-24T08:53:37Z")
Without an example of code (and an example of data), it’s hard to understand what you do and what you want to achieve.
---
### Author:  [@shakipete](https://discourse.threejs.org/u/shakipete)
#### Post date: [November 24, 2017, 9:14am UTC](https://discourse.threejs.org/t/polygon-texture/1275/3 "2017-11-24T09:14:00Z")
you perfectely right
here is my generic code I use
material2 returns correctely my shapes with the good color
but material1 (which is a texture) returns all shapes as black !
I tested my texture in a Box and it works fine, so texture itself is not the issue
If I use a “normalized” shape (circle, box, rectangle, …) texture is ok
but with a customized shape, it doesn’t
I am an old programmer, but very new with three.js,
so don’t hesitate to correct me
I will not take offence if you explain I came to a wrong track for my need
thx
```auto
var geometry = new THREE.Geometry();
var i = col.Arg0;
var verticeIndex = -1;
for (var NumberOfPoints = this._entity.Characteristics[++i].Values[row].Value; NumberOfPoints 0; NumberOfPoints--) {
var x = this._entity.Characteristics[++i].Values[row].Value,
y = this._entity.Characteristics[++i].Values[row].Value,
z = Is3D ? this._entity.Characteristics[++i].Values[row].Value : 0;
geometry.vertices.push(new THREE.Vector3(x, y, z));
verticeIndex++;
if (verticeIndex >= 2) {
var face = new THREE.Face3(verticeIndex - 2, verticeIndex - 1, verticeIndex);
geometry.faces.push(face);
}
}
geometry.computeFaceNormals();
geometry.computeVertexNormals();
var texture = new THREE.TextureLoader().load('textures/crate.gif');
var material1 = new THREE.MeshBasicMaterial({ map: texture });
var data = {
transparent: true, opacity: 1, overdraw: true, linewidth: 100, color: Options["stroke"]
};
var material2 = new THREE.LineBasicMaterial(data);
imesh++;
mesh[imesh] = new THREE.Mesh(geometry, material1);
scene.add(mesh[imesh]);
```
---
### Author:  [@looeee](https://discourse.threejs.org/u/looeee)
#### Post date: [November 26, 2017, 3:12am UTC](https://discourse.threejs.org/t/polygon-texture/1275/4 "2017-11-26T03:12:56Z")
Your custom geometry has no [UVs](https://en.wikipedia.org/wiki/UV_mapping). You’ll have to add them yourself if you want to display a texture on a custom geometry.
---
### Author:  [@shakipete](https://discourse.threejs.org/u/shakipete)
#### Post date: [November 27, 2017, 12:47pm UTC](https://discourse.threejs.org/t/polygon-texture/1275/5 "2017-11-27T12:47:28Z")
Ok, but how ?
I can’t find example
is that a three.js statement ?
where to code it ?
the wikipedia you sent doesn’t help
thx
Rgs
---
### Author:  [@Mugen87](https://discourse.threejs.org/u/Mugen87)
#### Post date: [November 28, 2017, 7:08pm UTC](https://discourse.threejs.org/t/polygon-texture/1275/6 "2017-11-28T19:08:43Z")
Working with procedural geometry can be a challenging task for 3D developers. You might want to study the [built-in geometry entities](https://github.com/mrdoob/three.js/tree/dev/src/geometries) of `three.js` to see how such algorithms work. But be aware, they are all based on `BufferGeometry`.
---
### Author:  [@hofk](https://discourse.threejs.org/u/hofk)
#### Post date: [November 28, 2017, 7:50pm UTC](https://discourse.threejs.org/t/polygon-texture/1275/7 "2017-11-28T19:50:10Z")
For BufferGeometry I have two really simple examples.
[http://threejs.hofk.de/BufferGeometry/01\_buffer.html](http://threejs.hofk.de/BufferGeometry/01_buffer.html)
[http://threejs.hofk.de/BufferGeometry/02\_buffer.html](http://threejs.hofk.de/BufferGeometry/02_buffer.html)
---
### Author:  [@hofk](https://discourse.threejs.org/u/hofk)
#### Post date: [November 29, 2017, 8:38am UTC](https://discourse.threejs.org/t/polygon-texture/1275/8 "2017-11-29T08:38:22Z")
A possibly helpful guide to the problem.
[https://solutiondesign.com/blog/-/blogs/webgl-and-three-js-texture-mappi-1](https://solutiondesign.com/blog/-/blogs/webgl-and-three-js-texture-mappi-1)
---
### Author:  [@shakipete](https://discourse.threejs.org/u/shakipete)
#### Post date: [November 29, 2017, 1:58pm UTC](https://discourse.threejs.org/t/polygon-texture/1275/9 "2017-11-29T13:58:21Z")
thx hufk
the “official” shapes (such circle, box, …) always work with texture
only the customized polygon does not (with me at least !)
so, your second reply doesn’t match
but I’ll try the first one
I’ll post in any case
thx
---
### Author:  [@shakipete](https://discourse.threejs.org/u/shakipete)
#### Post date: [December 25, 2017, 6:38pm UTC](https://discourse.threejs.org/t/polygon-texture/1275/10 "2017-12-25T18:38:54Z")
Hello,
I am still not able to see any of texture in my shape
here is simplification of mycode
I can see the shape, but the texture doesn’t apply to it. Why ???
any help would be appreciated
Thx
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-50, -50, 0));
geometry.vertices.push(new THREE.Vector3(50, -50, 0));
geometry.vertices.push(new THREE.Vector3(50, 50, 0));
geometry.vertices.push(new THREE.Vector3(0, 100, 0));
geometry.vertices.push(new THREE.Vector3(-50, 50, 0));
geometry.vertices.push(new THREE.Vector3(-50, -50, 0));
var uvTex = new THREE.TextureLoader().load(this.\_relativePath + “/images/water.jpg”);
var material1 = new THREE.MeshBasicMaterial({ map: uvTex, side: THREE.DoubleSide }); // uv grid
mesh01 = new THREE.Line(geometry, material1);
scene.add(mesh01);
---
### Author:  [@prisoner849](https://discourse.threejs.org/u/prisoner849)
#### Post date: [December 25, 2017, 8:14pm UTC](https://discourse.threejs.org/t/polygon-texture/1275/11 "2017-12-25T20:14:40Z")
Looks like you’ve missed to calculate `.faceVertexUvs` of your [`THREE.Geometry()`](https://threejs.org/docs/index.html#api/core/Geometry)
> **[UV mapping](https://en.wikipedia.org/wiki/UV_mapping)**
>
> UV mapping is the 3D modelling process of projecting a 2D image to a 3D model's surface for texture mapping. The letters "U" and "V" denote the axes of the 2D texture because "X", "Y" and "Z" are already used to denote the axes of the 3D object in model space.
> UV texturing permits polygons that make up a 3D object to be painted with color (and other surface attributes) from an ordinary image. The image is called a UV texture map. The UV mapping process involves assigning pixels in the image to s...
---
### Author:  [@shakipete](https://discourse.threejs.org/u/shakipete)
#### Post date: [December 28, 2017, 2:19pm UTC](https://discourse.threejs.org/t/polygon-texture/1275/12 "2017-12-28T14:19:35Z")
ok, but how ?
wiki is theoric only
I need an real & pratic sample.
thx anyway
---
### Author:  [@prisoner849](https://discourse.threejs.org/u/prisoner849)
#### Post date: [December 28, 2017, 2:32pm UTC](https://discourse.threejs.org/t/polygon-texture/1275/13 "2017-12-28T14:32:40Z")
There are no restrictions to take a look at the source code and to see how the things work.
>