如何在Three.js中创建底部为平面的圆锥几何体

我想要实现如下图所示的平底座圆锥效果，此前经过多方检索查询，都没能找到对应的实现方法。

以下是两种常用场景下的可直接落地的实现方法：

CSS 前端页面实现 #

核心通过CSS 3D变换和形状拼接实现，无需引入额外依赖：

• 基础版本实现代码：

<div class="cone-container">
  <div class="cone-side"></div>
  <div class="cone-bottom"></div>
</div>

.cone-container {
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-20deg);
}
.cone-side {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 300px solid #2385bb;
}
.cone-bottom {
  position: absolute;
  bottom: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #196a96;
  transform: translateY(50%) rotateX(90deg);
}

如果需要更平滑的侧面光影效果，可通过background: conic-gradient()配合mask-image做渐变裁剪，或者增加多个侧面切片做3D拼接。

Three.js 3D场景实现 #

Three.js内置几何体接口直接支持生成平底座圆锥，无需自定义建模：

• 实现代码示例：

// 导入必要依赖后执行
// 参数：底部半径、圆锥高度、侧面分段数、高度分段数、是否开放底面
const coneGeometry = new THREE.ConeGeometry(1, 2, 32, 1, false);
const coneMaterial = new THREE.MeshStandardMaterial({
  color: 0x2385bb,
  metalness: 0.2,
  roughness: 0.6
});
const cone = new THREE.Mesh(coneGeometry, coneMaterial);
scene.add(cone);

如果需要特殊形状的平底座圆锥，可使用LatheGeometry自定义2D轮廓线，旋转生成对应的3D模型。

内容的提问来源于stack exchange，提问作者Jordan