Non Indexed BufferGeometry Problem with Multiple Image Based Materials

Questions
,
1

---->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.

2

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

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

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

I would say your uv-data are wrong. If you provide a live demo, it will be easier to analyze this problem.

2 Likes
3

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.

4

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

5

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