Using Multiple Materials on Custom Geometry

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)

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);


Fiddle for complete JS code:

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:

Oh, that’s it? Thanks!