Three.js中如何使用ExtrudeBufferGeometry绘制开放端曲线立体形状

DevOps 小满

2026-9-30

解决方法

你要的开放端拉伸效果直接通过修改ExtrudeBufferGeometry的内置参数即可实现，不需要额外修改几何体顶点，具体实现步骤和代码如下：

核心参数说明

ExtrudeBufferGeometry的配置项中自带closed属性，默认值为true，控制是否生成拉伸方向前后两端的封盖面，将该参数设置为false即可直接得到无封盖的开放端拉伸模型。

基础实现代码

// 引入Three.js相关依赖（根据你的项目引入方式调整）
import * as THREE from 'three';

// 1. 定义拉伸截面，支持开放曲线/折线/多边形
const sectionShape = new THREE.Shape();
// 示例：绘制一段1.5π的开放圆弧，不需要闭合
sectionShape.moveTo(5, 0);
sectionShape.absarc(0, 0, 5, 0, Math.PI * 1.5, false);
// 禁止截面自动闭合，避免生成多余的侧面连接面
sectionShape.autoClose = false;

// 2. 配置拉伸参数
const extrudeConfig = {
  depth: 3, // 拉伸厚度，可自定义
  curveSegments: 32, // 曲线精度，数值越高曲面越平滑
  bevelEnabled: false, // 不需要斜角效果可关闭
  closed: false // 核心参数：关闭两端封盖
};

// 3. 生成几何体并创建模型
const openExtrudeGeo = new THREE.ExtrudeBufferGeometry(sectionShape, extrudeConfig);
// 建议开启双面渲染，避免从背面看不到模型
const mat = new THREE.MeshStandardMaterial({
  color: 0x2385ff,
  side: THREE.DoubleSide
});
const extrudeMesh = new THREE.Mesh(openExtrudeGeo, mat);
scene.add(extrudeMesh);

沿任意弧度路径拉伸实现

如果需要支持连续点按任意浮点弧度角度拼接，只需在拉伸配置中添加extrudePath参数指定自定义路径即可：

// 定义拉伸路径，支持任意角度的折线、曲线拼接
const pathPoints = [
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(15, 0, 0),
  // 支持任意弧度的拐角，示例为60度（π/3弧度）拐角
  new THREE.Vector3(15 + 10 * Math.cos(Math.PI/3), 10 * Math.sin(Math.PI/3), 0)
];
// 可根据需要选择曲线类型：LineCurve3为硬拐角，CatmullRomCurve3为平滑过渡
const customExtrudePath = new THREE.CatmullRomCurve3(pathPoints);

// 拉伸配置新增路径参数
const extrudeConfig = {
  steps: 64, // 路径分段数，数值越高拐角过渡越平滑
  bevelEnabled: false,
  closed: false,
  extrudePath: customExtrudePath
};

常见问题排查

如果设置后仍出现意外闭合的面，检查两个点：

你的截面路径是否手动调用了closePath()方法，去掉该调用即可
确认你使用的Shape实例的autoClose属性为false

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