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;
group.add(front)
group.add(back)
scene.add(group);
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?