如何使用THREE.js将样条线拉伸到场景的原点

Question

当尝试将样条线拉伸到场景的原点时，我头疼。这就是我想要做的事情：

我正在用

创建一个样条线

let centerX = 0
let centerY = 0
let radius = 200
let coils = 50
let rotation = 2 * Math.PI
let thetaMax = coils * Math.PI
let awayStep = radius / thetaMax
let chord = 5
let vertices = []

for (let theta = chord / awayStep; theta <= thetaMax;) {
  let away = awayStep * theta
  let around = theta + rotation
  let x = centerX + Math.cos(around) * away
  let y = centerY + Math.sin(around) * away

  theta += chord / away

  let vec3 = new THREE.Vector3(x, y, 0)
  vertices.push(vec3)
}

let axisPoints = []

data.forEach((d, i) => {
  axisPoints.push(new THREE.Vector3(vertices[i].z, vertices[i].y / 2, vertices[i].x / 2))
})

let axis = new THREE.CatmullRomCurve3(axisPoints)
let geometry = new THREE.BufferGeometry().setFromPoints(axis.getPoints(axisPoints.length))
let material = new THREE.LineBasicMaterial({
  color: 0x481e34,
  transparent: true,
  opacity: 0.2
})
let splineObject = new THREE.Line(geometry, material)

scene.add(splineObject)

我想沿着该样条线拉伸“网格” /“面”，该样条正好像场景的原点（0）一样：

我尝试了很多事情，但我不知道:( 任何帮助将不胜感激！

谢谢！

Answer 1

作为一种选择，您可以使用样条曲线的坐标修改开放式圆柱缓冲区几何的坐标数组：

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

return

根据您的需要，您可以修改任何原始类型的点。