Non Indexed BufferGeometry Problem with Multiple Image Based Materials

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

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

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.

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

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