如何将边缘渲染成圆柱体？

Question

我加载了一个OBJ多面体，并使用EdgesGeometry()提取了它的边缘：

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

但是我想把每个边缘渲染成一个具有可配置半径的圆柱体。就像这样：

​

Answer 1

​

​

一个可自定义的解决方案，您可以从以下几个方面着手：

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);
}

小提琴实例

Answer 2

以下是@Pricer849的优秀答案的一个版本，它只返回一个合并的BufferGeometry，用于两个柱体：

/** 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);
}

用法：

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);

见更新小提琴。