How to render edges as cylinders? - three.js

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:

Answer 1

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

Answer 2

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.