如何在 Three.js 中创建半圆球体

Question

我是 Three.js 的新手，我正在尝试创建一个半球，就像球体的一半一样。然而，我似乎可以\xe2\x80\x99t找到它的几何形状。您是否需要创建自定义形状以及如何操作？

\n

我想创建一个像这样的半球：

\n

\n

Answer 1

THREE.SphereGeometry 在构造函数上有 4 个参数，您可以使用它们来指定球体开始和结束的纬度和经度：phiStart, phiEnd, thetaStart, thetaEnd。您可以在官方文档页面上看到它的运行情况。

下面是一个演示：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight,  1, 1000);
camera.position.z = 50;

const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas: document.querySelector("#canvas")
});
renderer.setSize(window.innerWidth, window.innerHeight);
const controls = new THREE.OrbitControls( camera, renderer.domElement );

// Half a sphere
const phiStart = 0;
const phiEnd = Math.PI * 2;
const thetaStart = 0;
const thetaEnd = Math.PI / 2;

const geometry = new THREE.SphereGeometry( 15, 32, 16, phiStart, phiEnd, thetaStart, thetaEnd );
const material = new THREE.MeshBasicMaterial( { color: 0x9900ff, wireframe: true } );
const sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

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

animate();

html, body { margin:0; padding:0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

<canvas id="canvas"></canvas>