CODEWITHSUNDEEP
three.jsrenderingedges
Humberto José Bortolossi
Humberto José Bortolossi

Reputation: 138

How to render edges as cylinders?

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.

Upvotes: 2

Views: 1029

Answers (2)

danvk
danvk

Reputation: 16905

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.

Upvotes: 3

prisoner849
prisoner849

Reputation: 17586

Teasing picture ;)

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

Upvotes: 5

Related Questions