javascript - ThreeJS半球

这很可能是一个非常简单的问题，因此提前致歉。

我正在尝试在ThreeJS中制作3D半球。

我可以使用Circle或CircleBuffer几何图形创建一个半球（以防万一，如果我使用了错误的单词，一个球体，切成两半！），但由于缺少更好的单词，这使得平坦的侧面为“空”。

我试图用一个圆圈填充它，但是没有运气。

我敢肯定，这只是添加一些内容以告知几何图形在此处添加另一个面的一种情况，但我不知道该如何做！

最佳答案

我的5个kopeikas。半球+圆：

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://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>