THREE.js: Adding geometry groups with wireframe materials

Illustrates the issue with changing geometry group material to wireframe.

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<p>
Here we create a <code>BufferGeometry</code> and add three cubes to it, each represented by a separate group in <code>geom.groups</code>. Initially, the buffers are pre-allocated to support adding new vertices and indices. First, we add two cubes, each using <code>MeshStandardMaterial</code>, then we change the material of one of them to a wireframe <code>MeshBasicMaterial</code>, and render the scene. Then, we add the third cube, and try to set the material also to wireframe. After rendering, we don't see the third cube.
</p>
<p>
<strong>NOTE:</strong> Changing <code>MeshBasicMaterial</code> to <code>wireframe=false</code> shows all three cubes as expected.
</p>

JavaScript

const WIDTH = 400,
    HEIGHT = 200,
    geom = new THREE.BufferGeometry(),
    pos_arr = new Float32Array( 3 * 8 * 3 ),
    ind_arr = new Int16Array( 3 * 36 ),
    scene = new THREE.Scene();

 // The 'wireframe: true' parameter in the second material is causing the problem. Setting
 // it to 'false' results in correct display of all cubes.
const materials = [
    new THREE.MeshStandardMaterial( { color: 0xff0000 } ),
    new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: true, wireframeLinewidth: 2 } ),
]    

let cube_count = 0;

geom.setIndex( new THREE.Uint16BufferAttribute( ind_arr, 1 ));
geom.addAttribute( 'position', new THREE.Float32BufferAttribute( pos_arr, 3 ));

// Adds a cube to the geometry, and creates a new group for it. By default,
// the material is `MeshStandardMaterial`.
function addCube ()
{
    const x = cube_count * 2.0;
    geom.attributes.position.set( [
        x,0,0, x+1,0,0, x,1,0, x+1,1,0, x,0,1, x+1,0,1, x,1,1, x+1,1,1
    ], cube_count * 8 * 3 );
    const i = cube_count * 8;
    geom.index.array.set( [ 
        i,i+1,i+3, i,i+3,i+2, i,i+4,i+5, i,i+5,i+1, i,i+2,i+6, i,i+6,i+4,
        i+4,i+6,i+7, i+4,i+7,i+5, i+2,i+3,i+7, i+2,i+7,i+6, i+1,i+5,i+7, i+1,i+7,i+3
    ], cube_count * 36 );
    geom.addGroup( cube_count * 36, 36, 0 );
    geom.index.needsUpdate = true;
    geom.attributes.position.needsUpdate = true;
    cube_count++;
}

 // Create two cubes in the geometry:
addCube();
addCube();

 // Create mesh, setup the scene and the renderer
scene.add( new THREE.Mesh( geom, materials ) );
const camera = new THREE.PerspectiveCamera( 75, WIDTH/HEIGHT, 0.1, 50 );
camera.position.set( 2.5, 0.5, 3 );
scene.add( camera );
scene.add( new THREE.AmbientLight( 0xFFFFFF ) );
const renderer = new THREE.WebGLRenderer( { antialias: true });
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( WIDTH, HEIGHT );
document.body.appendChild( renderer.domElement );

 // Now, change material of cube 2 to wireframe. This works fine,...