Three.js 三股平螺旋形

我正在考虑创建一个螺旋形状，并希望对该方法提供一些指导。想象一下，你将一条扁平的丝带缠绕在一个圆柱形的管子上（每圈之间有一个空间），这就是我试图创建的形状

我最初的想法是使用管状几何体，但它似乎只能接受圆形轮廓。我想要一个平的/直的侧面

因为我最终也希望在螺旋的末端有一个形状，我考虑过创建两个点阵列，一个用于外部螺旋，另一个用于内部螺旋，然后使用三个形状，但我相信只能生成二维形状，这是不可能的

虽然定义圆柱体非常方便，但仅仅在其上添加纹理并不能提供所需的控制

---

螺旋背后的数学并不难，我只是不知道实际创建螺旋的最佳方法是什么？非常感谢您的指导。

如果有人对我感兴趣，我确实从三个对话页面获得了一份不错的报告

这一切都归功于该论坛的“prisoner849”，这里有一个直接链接到一支密码笔，他的答案涉及弯曲一个薄盒子

---

到目前为止你尝试了什么？还需要注意的是，像这样的问题可能会产生固执己见的答案（讨论的方法比一个有有效答案的直截了当的问题更容易产生意见，即使有几个有效的答案）。如果这个问题是一个头脑风暴/假设性的对话，它会在这里找到一个更好的家：谢谢@TheJim01，我会把问题贴在那里

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 3, 5);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x101000);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(100);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var rbnWidth = .5;
var rbnThickness = 0.1;
var rbnSteps = 1;
var rbnStepLength = 1.5;
var rbnSegsPerStep = 50;
var rbnRadius = 1;

var rbnGeom = new THREE.BoxGeometry(rbnSteps * Math.PI * 2, rbnWidth, rbnThickness, rbnSteps * rbnSegsPerStep, 1, 1);
rbnGeom.computeBoundingBox();
var size = new THREE.Vector3();
rbnGeom.boundingBox.getSize(size);
rbnGeom.translate(size.x * 0.5, size.y * 0.5, size.z * 0.5);

// bend it!

rbnGeom.vertices.forEach(v => {
  let angle = -v.x;
  let radius = rbnRadius + v.z;
  let shift = (v.x / (Math.PI * 2)) * rbnStepLength + v.y;

  v.x = Math.cos(angle) * radius;
  v.y = shift;
  v.z = Math.sin(angle) * radius;
}); 

rbnGeom.computeFaceNormals();
rbnGeom.computeVertexNormals();

rbnGeom.center();


var ribbon = new THREE.Mesh(rbnGeom, new THREE.MeshStandardMaterial({color: 0x0099ff}));
scene.add(ribbon);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}