How to render edges as cylinders?

问题

我已经加载了一个 OBJ 多面体,并使用 EdgesGeometry() 来提取它的边缘:

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

但我想将每个边缘渲染为具有可配置半径的圆柱体。 像这样的东西:

边缘呈现为圆柱体的十二面体。

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

jsfiddle 示例

回答2

这是@prisoner849 的优秀答案的一个版本,它只为圆柱返回合并的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);

请参阅更新的小提琴。


更多相关内容:请点击查看