Three.js线向量到圆柱？

Question

我有这个在2点之间创建一条线:

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0, 0, 0));
geometry.vertices.push(new THREE.Vector3(20, 100, 55));
var line = new THREE.Line(geometry, material, parameters = { linewidth: 400 });
scene.add(line);

(线宽,没有任何影响.)

我的问题是如何将其转换为圆柱体？我想在两点之间创建一个圆柱体.

Answer 1

截至 2020 年 12 月：

我试图准确执行之前答复中所说的内容，但没有任何效果。

我的解决方案：

cylinderMesh = function (pointX, pointY) {
  // edge from X to Y
  var direction = new THREE.Vector3().subVectors(pointY, pointX);
  const material = new THREE.MeshBasicMaterial({ color: 0x5B5B5B });
  // Make the geometry (of "direction" length)
  var geometry = new THREE.CylinderGeometry(0.04, 0.04, direction.length(), 6, 4, true);
  // shift it so one end rests on the origin
  geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, direction.length() / 2, 0));
  // rotate it the right way for lookAt to work
  geometry.applyMatrix(new THREE.Matrix4().makeRotationX(THREE.Math.degToRad(90)));
  // Make a mesh with the geometry
  var mesh = new THREE.Mesh(geometry, material);
  // Position it where we want
  mesh.position.copy(pointX);
  // And make it point to where we want
  mesh.lookAt(pointY);

  return mesh;
}

Answer 2

我有完全相同的问题 - 在WebGL中,线宽总是1.所以这是我写的一个函数,它将采用两个Vector3对象并生成一个圆柱网格:

var cylinderMesh = function( pointX, pointY )
{
    // edge from X to Y
    var direction = new THREE.Vector3().subVectors( pointY, pointX );
    var arrow = new THREE.ArrowHelper( direction, pointX );

    // cylinder: radiusAtTop, radiusAtBottom, 
    //     height, radiusSegments, heightSegments
    var edgeGeometry = new THREE.CylinderGeometry( 2, 2, direction.length(), 6, 4 );

    var edge = new THREE.Mesh( edgeGeometry, 
        new THREE.MeshBasicMaterial( { color: 0x0000ff } ) );
    edge.rotation = arrow.rotation.clone();
    edge.position = new THREE.Vector3().addVectors( pointX, direction.multiplyScalar(0.5) );
    return edge;
}