ThreeJS Hemisphere

This is quite possibly a very simple question, so apologies in advance.

I’m trying to make a 3D hemisphere in ThreeJS.

I can create a hemisphere (in case I’m using the wrong word, a sphere, cut in half!) outer using the Circle or CircleBuffer geometry, but this leaves the flat side ‘empty’ for lack of a better word.

I have tried to fill this with a circle, but no luck.

I’m sure its just a case of adding something to tell the geometry to add another face there but I have no idea how!

Answer

My 5 kopeikas. Hemisphere + circle:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 5, 8);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
scene.add(new THREE.AxesHelper(5));

var radius = 3;
var radialSegments = 32;
var material = new THREE.MeshStandardMaterial({
  color: "blue"
});
var hemiSphereGeom = new THREE.SphereBufferGeometry(radius, radialSegments, Math.round(radialSegments / 4), 0, Math.PI * 2, 0, Math.PI * 0.5);
var hemiSphere = new THREE.Mesh(hemiSphereGeom, material);
var capGeom = new THREE.CircleBufferGeometry(radius, radialSegments);
capGeom.rotateX(Math.PI * 0.5);
var cap = new THREE.Mesh(capGeom, material);
hemiSphere.add(cap);

scene.add(hemiSphere);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.94.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.94.0/examples/js/controls/OrbitControls.js"></script>