How to render edges as cylinders?

Question

I've loaded an OBJ polyhedron and I've used EdgesGeometry() to extract its edges:

var edges = new THREE.LineSegments(new THREE.EdgesGeometry(child.geometry), new THREE.LineBasicMaterial( {color: 0x000000}) );

But I would like to render each edge as a cylinder with configurable radius. Something like this:

Dodecahedron with edges rendered as cylinders.

**1)** Welcome to StackOverflow! Please take a moment to read [How To Ask A Good Question](https://stackoverflow.com/help/how-to-ask), and consider adding a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) to your post. **2)** What have you tried so far? What you want requires understanding what `EdgesGeometry` is returning, and converting that into a collection of cylinders and spheres. If you can tell us what specific problem you're encountering doing that, we'll be able to better help you. — TheJim01, Jun 02 '17 at 00:34
Possible solution: https://stackoverflow.com/questions/15316127/three-js-line-vector-to-cylinder — Radio, Jun 02 '17 at 19:58

score 5 · Accepted Answer · answered Jun 03 '17 at 16:58

A customizable solutuion, which you can start from:

var edgesGeom = new THREE.EdgesGeometry(dodecahedronGeom); //EdgesGeometry is a BufferGeometry

var thickness = 0.25; // radius of a cylinder

for (var i = 0; i < edgesGeom.attributes.position.count - 1; i+=2){

  // when you know that it's BufferGeometry, you can find vertices in this way
  var startPoint = new THREE.Vector3(
    edgesGeom.attributes.position.array[i * 3 + 0],
    edgesGeom.attributes.position.array[i * 3 + 1],
    edgesGeom.attributes.position.array[i * 3 + 2]
  );
    var endPoint = new THREE.Vector3(
    edgesGeom.attributes.position.array[i * 3 + 3],
    edgesGeom.attributes.position.array[i * 3 + 4],
    edgesGeom.attributes.position.array[i * 3 + 5]
  );

  var cylLength = new THREE.Vector3().subVectors(endPoint, startPoint).length(); // find the length of a cylinder
  var cylGeom = new THREE.CylinderBufferGeometry(thickness, thickness, cylLength, 16);
  cylGeom.translate(0, cylLength / 2, 0);
  cylGeom.rotateX(Math.PI / 2);
  var cyl = new THREE.Mesh(cylGeom, new THREE.MeshLambertMaterial({color: "blue"}));
  cyl.position.copy(startPoint);
  cyl.lookAt(endPoint);  // and do the trick with orienation
  scene.add(cyl);
}

jsfiddle example

This still works. Note that `CylinderBufferGeometry` seems to have been renamed to `CylinderGeometry`. — supergra, Aug 06 '21 at 23:38

score 3 · Answer 2 · answered Nov 25 '19 at 20:42

Here's a version of @prisoner849's excellent answer which returns a merged BufferGeometry for just the cylinders:

/** Convert an edges geometry to a set of cylinders w/ the given thickness. */
function edgesToCylinders(edgesGeometry, thickness) {
  const {position} = edgesGeometry.attributes;
  const {array, count} = position;
  const r = thickness / 2;
  const geoms = [];
  for (let i = 0; i < count * 3 - 1; i += 6) {
    const a = new THREE.Vector3(array[i], array[i + 1], array[i + 2]);
    const b = new THREE.Vector3(array[i + 3], array[i + 4], array[i + 5]);

    const vec = new THREE.Vector3().subVectors(b, a);
    const len = vec.length();
    const geom = new THREE.CylinderBufferGeometry(r, r, len, 8);
    geom.translate(0, len / 2, 0);
    geom.rotateX(Math.PI / 2);
    geom.lookAt(vec);
    geom.translate(a.x, a.y, a.z);
    geoms.push(geom);
  }
  return THREE.BufferGeometryUtils.mergeBufferGeometries(geoms);
}

Usage:

const edgesGeom = new THREE.EdgesGeometry(dodecahedronGeom);
const cylindersGeom = edgesToCylinders(edgesGeom, 0.25);
const cylinders = new THREE.Mesh(
  cylindersGeom,
  new THREE.MeshLambertMaterial({color: "blue"})
);
scene.add(cylinders);

See updated fiddle.

How to render edges as cylinders?

2 Answers2

Linked