THREE.js: Adding geometry groups with wireframe materials

Illustrates the issue with changing geometry group material to wireframe.

HTML

<script src="https://threejs.org/build/three.min.js"></script>

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

const material = new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: true } );

let cube_count = 0;

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

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 );
    cube_count ++;
    geom.setDrawRange( 0, cube_count * 36 );
}

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

// Add two cubes to the geometry:
addCube();
addCube();

// Render
renderer.render( scene, camera );

// Add another cube
addCube();
geom.index.needsUpdate = true;
geom.attributes.position.needsUpdate = true;

// Render
renderer.render( scene, camera );