如何将边缘渲染为圆柱体?

问题描述

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

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:

推荐答案

一个可定制的解决方案，您可以从:

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 示例

这篇关于如何将边缘渲染为圆柱体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！