如何在Three.js中为两条椭圆曲线创建带高度的网格？

要在两条椭圆曲线之间创建带高度的网格，有两种常用方法，以下是具体实现：

方法一：手动构建曲面网格（适合不同高度的同尺寸椭圆） #

这种方式直接通过顶点和面索引构建几何体，适合将两条平行椭圆（不同高度）连接成曲面的场景：

步骤代码 #

// 配置参数
const curveSegments = 200; // 曲线采样精度，值越高网格越平滑
const liftHeight = 10;     // 网格抬升的高度

// 创建第一条椭圆曲线（Z=0平面）
const curve1 = new THREE.EllipseCurve(0, 0, 25, 20, 0, 2 * Math.PI, false, 0);
const points2D_1 = curve1.getPoints(curveSegments);
// 转换为3D坐标，Z轴设为0
const points3D_1 = points2D_1.map(p => new THREE.Vector3(p.x, p.y, 0));

// 创建第二条椭圆曲线（Z=liftHeight平面）
const curve2 = new THREE.EllipseCurve(0, 0, 25, 20, 0, 2 * Math.PI, false, 0);
const points2D_2 = curve2.getPoints(curveSegments);
// 转换为3D坐标，Z轴设为抬升高度
const points3D_2 = points2D_2.map(p => new THREE.Vector3(p.x, p.y, liftHeight));

// 构建几何体顶点和面索引
const vertices = [];
const indices = [];

// 加入两条曲线的所有顶点
points3D_1.forEach(p => vertices.push(p.x, p.y, p.z));
points3D_2.forEach(p => vertices.push(p.x, p.y, p.z));

// 生成四边形面（由两个三角形组成）
for (let i = 0; i < curveSegments; i++) {
  const curr = i;
  const next = (i + 1) % curveSegments; // 循环闭合
  const curr2 = curr + curveSegments;
  const next2 = next + curveSegments;

  indices.push(curr, next, curr2);
  indices.push(next, next2, curr2);
}

// 创建BufferGeometry
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
geometry.setIndex(indices);
geometry.computeVertexNormals(); // 计算法线，保证光影显示正常

// 创建材质和网格
const material = new THREE.MeshStandardMaterial({ 
  color: 0x42a5f5, 
  side: THREE.DoubleSide // 双面显示，避免背面不可见
});
const mesh = new THREE.Mesh(geometry, material);
mesh.rotation.x = Math.PI / 2; // 和你原来的椭圆旋转角度保持一致
scene.add(mesh);

方法二：使用ExtrudeGeometry拉伸环形（适合同平面不同尺寸椭圆） #

如果两条椭圆是同平面的内外椭圆（形成环形区域），可以用ExtrudeGeometry直接拉伸这个环形获得高度：

步骤代码 #

const curveSegments = 200;
const liftHeight = 10;

// 创建外椭圆路径
const outerEllipse = new THREE.EllipseCurve(0, 0, 25, 20, 0, 2 * Math.PI, false, 0);
const outerPath = new THREE.Path(outerEllipse.getPoints(curveSegments));

// 创建内椭圆路径（注意方向设为顺时针，和外椭圆相反）
const innerEllipse = new THREE.EllipseCurve(0, 0, 20, 15, 0, 2 * Math.PI, true, 0);
const innerPath = new THREE.Path(innerEllipse.getPoints(curveSegments));

// 构建环形形状（外路径+内孔洞）
const ringShape = new THREE.Shape();
ringShape.setFromPoints(outerPath.getPoints());
ringShape.holes.push(innerPath);

// 拉伸配置
const extrudeOpts = {
  depth: liftHeight,
  curveSegments: curveSegments,
  bevelEnabled: false // 关闭倒角，保持简洁
};

// 创建拉伸几何体
const geometry = new THREE.ExtrudeGeometry(ringShape, extrudeOpts);
const material = new THREE.MeshStandardMaterial({ color: 0xef5350 });
const mesh = new THREE.Mesh(geometry, material);
mesh.rotation.x = Math.PI / 2;
scene.add(mesh);

注意事项 #

• 调整curveSegments可以平衡网格平滑度和性能，值越大越平滑但消耗更多资源
• 若需要显示网格线，可以额外添加THREE.EdgesGeometry生成线框
• 使用MeshStandardMaterial能获得更真实的光影效果，记得添加光源到场景中

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