Using Multiple Materials on Custom Geometry

Questions
,
1

Using THREE.BufferGeometryUtils, I’m trying to create a single custom geometry that consists of three planes slightly spaced out with three different materials (red, green, and blue fills). When I try to use an array of these materials (mats), nothing is rendered. What am I missing? Help would be appreciated!

let geoArr = [
	new THREE.PlaneBufferGeometry(10,10),
	new THREE.PlaneBufferGeometry(10,10),
	new THREE.PlaneBufferGeometry(10,10)
];
geoArr[0].translate(-11,0,0);
geoArr[2].translate(11,0,0);

let geos = THREE.BufferGeometryUtils.mergeBufferGeometries(geoArr,false),
	mats = [
		new THREE.MeshBasicMaterial({
			color: 0xff0000
		}),
		new THREE.MeshBasicMaterial({
			color: 0x00ff00
		}),
		new THREE.MeshBasicMaterial({
			color: 0x0000ff
		})
	],
	planes = new THREE.Mesh(geos,mats);

scene.add(planes);

Fiddle for complete JS code:
https://jsfiddle.net/jkantner/179586Ly/20/

2

Just set the second parameter of mergeBufferGeometries() to true. According to the docs, this enabled the generation of group data (which makes it possible to use multiple materials per 3D object).

Updated fiddle: https://jsfiddle.net/jyq34os2/

3

Oh, that’s it? Thanks!