# Non Indexed BufferGeometry Problem with Multiple Image Based Materials

**URL:** <https://discourse.threejs.org/t/non-indexed-buffergeometry-problem-with-multiple-image-based-materials/1808>\
**Category:** Questions\
**Tags:** buffergeometry, materials\
**Created:** [February 8, 2018, 7:46pm UTC](https://discourse.threejs.org/t/non-indexed-buffergeometry-problem-with-multiple-image-based-materials/1808 "2018-02-08T19:46:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![soldOn3js](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@soldOn3js](https://discourse.threejs.org/u/soldOn3js)\
**Post date:** [February 8, 2018, 7:46pm UTC](https://discourse.threejs.org/t/non-indexed-buffergeometry-problem-with-multiple-image-based-materials/1808/1 "2018-02-08T19:46:40Z")

</div>

----\>three.js revision 74\<----

First, I’m using three.PlaneGeometryBuffer to create a single row of planes that is 50 planes wide.

```
var gridLabelGeom = new THREE.PlaneBufferGeometry(2000, 100, 50, 1);
gridLabelGeom.dynamic = true
gridLabelGeom = gridLabelGeom.toNonIndexed()

```

I have made it non indexed so I can have a different material for each plane. I use the “addGroup” of the planeBufferGeometry to group the vertices in such a way as to create rectangles. What I’m targeting to get is 50 rectangles that are colored in this patter: red, green, blue, red, green, …

gridLabelGeom.clearGroups();  
for (var i = 0; i \< 50; i++) {  
gridLabelGeom.addGroup((i + i \* 5), 6, i);  
}

lastly is specify the mesh as:

gridLabelMesh = new THREE.Mesh(gridLabelGeom, new THREE.MultiMaterial(gridLabelMaterials));

Where gridLabelMaterials is nothing but array with elements like:

new THREE.MeshBasicMaterial({ color: myTextureColor, visible: true, side: THREE.FrontSide })

There is NO problem at this point because I actually get single row 50 rectangles that alternate in color.

However, if I populate the gridLabelMaterials array like below with image based textures all I get is one big image that occupies the space of the whole planeBufferGeometry rather than 50 different images.

new THREE.MeshBasicMaterial({ map: myImageTexture, visible: true, side: THREE.FrontSide })

What am I doing wrong such that color based textures work while image based textures don’t?

Thanks for any assistance.

---

<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:** [February 9, 2018, 2:13pm UTC](https://discourse.threejs.org/t/non-indexed-buffergeometry-problem-with-multiple-image-based-materials/1808/2 "2018-02-09T14:13:55Z")

</div>

> [@soldOn3js](#):
>
> I have made it non indexed so I can have a different material for each plane.

You can also have multiple materials on indexed geometries (see `BoxBufferGeometry` as an example).

> [@soldOn3js](#):
>
> gridLabelMesh = new THREE.Mesh(gridLabelGeom, new THREE.MultiMaterial(gridLabelMaterials));

You can just do this (assuming `gridLabelMaterials` is an array of materials):

```javascript
gridLabelMesh = new THREE.Mesh( gridLabelGeom, gridLabelMaterials );

```

> [@soldOn3js](#):
>
> What am I doing wrong such that color based textures work while image based textures don’t?

I would say your uv-data are wrong. If you provide a [live demo](https://jsfiddle.net/f2Lommf5/), it will be easier to analyze this problem.

---

<div class="post-metadata">

**Author:** ![soldOn3js](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@soldOn3js](https://discourse.threejs.org/u/soldOn3js)\
**Post date:** [February 9, 2018, 4:05pm UTC](https://discourse.threejs.org/t/non-indexed-buffergeometry-problem-with-multiple-image-based-materials/1808/3 "2018-02-09T16:05:37Z")

</div>

Thanks! I totally neglected UV mapping. Do you have any examples of how do that for a planebuffergeometry? I trying to map the complete texture.

Thanks for any help.

---

<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:** [February 9, 2018, 4:19pm UTC](https://discourse.threejs.org/t/non-indexed-buffergeometry-problem-with-multiple-image-based-materials/1808/4 "2018-02-09T16:19:15Z")

</div>

Just have a look at the source code of `PlaneBufferGeometry`. You can use this as a foundation for your custom uv generation.

> <https://github.com/mrdoob/three.js/blob/e369389771e35aa55f4d9b0a9b2c8850f8e9b3b7/src/geometries/PlaneGeometry.js#L86-L87>

---

<div class="post-metadata">

**Author:** ![soldOn3js](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@soldOn3js](https://discourse.threejs.org/u/soldOn3js)\
**Post date:** [February 12, 2018, 2:43pm UTC](https://discourse.threejs.org/t/non-indexed-buffergeometry-problem-with-multiple-image-based-materials/1808/5 "2018-02-12T14:43:40Z")

</div>

I looked at the source code for the plane buffer geometry and I saw what UV would generated if both width and height had one segment (which is my use case). What I don’t know now is how to make that UV apply to each of the plane faces. My goal is it to have a complete texture based image mapped to each plane face. As a result each face would have a different image on it.

Thanks