3.js-用弧生成形状

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

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

var shape = new THREE.Shape();
shape.absarc(0, -4, 5, THREE.Math.degToRad(60), THREE.Math.degToRad(120));
shape.absarc(0, 4, 5, THREE.Math.degToRad(240), THREE.Math.degToRad(300));

var extrudeGeom = new THREE.ExtrudeGeometry(shape, {
  steps: 180,
  depth: 4,
  bevelEnabled: false
});

var axis = new THREE.Vector3(0, 0, 1);
extrudeGeom.vertices.forEach(v => {
  v.applyAxisAngle(axis, v.z * Math.PI);
});

extrudeGeom.computeFaceNormals();
extrudeGeom.computeVertexNormals();

var mesh = new THREE.Mesh(extrudeGeom, new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
}));
mesh.rotation.y = Math.PI;

scene.add(mesh);

var profile = new THREE.LineLoop(new THREE.BufferGeometry().setFromPoints(shape.getPoints()), new THREE.LineBasicMaterial({
  color: "yellow",
  depthTest: false
}));
mesh.add(profile);


render();

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

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>