InstancedMesh with grouped Meshes. Is this possible?

If I wanted to draw one single sphere but the front side is rendered slightly different to its back I could do something along the lines:

        var front_material = new THREE.MeshPhysicalMaterial(props);
        front_material.side = THREE.FrontSide;
        front_material.color = new THREE.Color('black');
        front_material.opacity = 0.8;

        var back_material = new THREE.MeshPhysicalMaterial(props);
        back_material.side = THREE.BackSide;
        back_material.color = new THREE.Color('red');
        back_material.opacity = 0.8;

        var front = new THREE.Mesh(sphere_geometry, front_material);
        front.renderOrder = 2;
        var back = new THREE.Mesh(sphere_geometry, back_material);
        back.renderOrder = 1;


I would like now to do an InstancedMesh where each instance is a group of two spheres in a similar manner to what is outlined above. I need to draw 100,000 spheres maximum (hence if every single instance is actually 2 meshes, that will make it 200,000)

Is this possible please?

Each InstancedMesh can redraw only a single mesh with a single material, so for the use case described above you will need two InstancedMesh objects.

Yes, indeed. Thanks for this. I think I will do one InstancedMesh for the front sides and then another InstancedMesh for the back sides. They wont be grouped, but I will see how far I get…