如何在three.js中高效创建Tube管道 优先采用贝塞尔曲线等直观方案

核心优势：无需手动继承THREE.Curve实现getPoint方法，也不用处理t参数的数学计算，直接用THREE内置的曲线类传入坐标点即可生成管道路径，上手门槛更低。

原生THREE.js实现 #

方案1：CatmullRom平滑曲线（最直观） #

只要列出管道需要经过的所有坐标点，即可自动生成平滑过渡的路径，调整路径仅需修改点位坐标：

// 1. 定义管道经过的坐标点，可根据需求随意增减修改
const pathPoints = [
  new THREE.Vector3(-1.5, 0, 0),
  new THREE.Vector3(-0.75, 1, 0),
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(0.75, -1, 0),
  new THREE.Vector3(1.5, 0, 0)
]
// 2. 用内置类生成平滑曲线，无需自定义计算逻辑
const curve = new THREE.CatmullRomCurve3(pathPoints)
// 3. 生成管道几何体
const tubeGeometry = new THREE.TubeGeometry(
  curve, // 路径曲线
  64, // 路径分段数，数值越高路径越平滑
  0.2, // 管道半径
  8, // 管道横截面分段数
  false // 管道是否首尾闭合
)
// 4. 创建网格并添加到场景
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
const tube = new THREE.Mesh(tubeGeometry, material)
scene.add(tube)

方案2：三次贝塞尔曲线 #

如果需要精准控制曲线曲率，可以使用内置的三次贝塞尔曲线类，仅需定义起点、两个控制点、终点即可：

// 直接定义贝塞尔曲线的点位参数
const bezierCurve = new THREE.CubicBezierCurve3(
  new THREE.Vector3(-1.5, 0, 0), // 曲线起点
  new THREE.Vector3(-1, 2, 0), // 第一个控制点，控制前半段曲率
  new THREE.Vector3(1, -2, 0), // 第二个控制点，控制后半段曲率
  new THREE.Vector3(1.5, 0, 0) // 曲线终点
)
// 生成管道逻辑和方案1完全一致
const tubeGeometry = new THREE.TubeGeometry(bezierCurve, 64, 0.2, 8, false)

React Three Fiber 适配说明 #

可以直接把上述逻辑移植到组件中，也可以使用drei封装的Tube组件简化代码：

import { Tube } from '@react-three/drei'

function CustomTube() {
  // 定义路径点
  const pathPoints = [
    [-1.5, 0, 0],
    [-0.75, 1, 0],
    [0, 0, 0],
    [0.75, -1, 0],
    [1.5, 0, 0]
  ].map(coords => new THREE.Vector3(...coords))
  const curve = new THREE.CatmullRomCurve3(pathPoints)

  return (
    <Tube args={[curve, 64, 0.2, 8, false]}>
      <meshBasicMaterial color={0x00ff00} />
    </Tube>
  )
}

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