在three.js中合并线几何体。

Question

我遇到了一个问题，需要将多条线合并成一个几何体。这些线的几何形状是使用CubicBezierCurve3构建的：

const curve = new CubicBezierCurve3(
            point1,
            point2,
            point3,
            point4
        );
        const geometry = new BufferGeometry();
        const points = curve.getPoints(16);
        geometry.setFromPoints(points);

然后使用BufferGeometryUtils将这两个几何体合并：

const line = new Line(BufferGeometryUtils.mergeBufferGeometries([line1Geometry, line2Geometry], false), new LineBasicMaterial())

结果生成了所需的图形，但有一条额外的线条连接它们。

线条

如果我在合并时改变顺序，则会得到不同的线条。我不明白如何解决这个问题。

线条2

- Artur

Answer 1

针对这种情况，您不能使用THREE.Line，因为它代表一条连续的线。因此，如果将两条分离的线合并成一条线，则不会有隔开它们的间隙。

您必须使用THREE.LineSegments，但这意味着您必须预处理曲线几何图形。请参考以下实时示例：

let camera, scene, renderer;

init();
render();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.set(0, 0.5, 2);

  scene = new THREE.Scene();

  const curve1 = new THREE.CubicBezierCurve3(
    new THREE.Vector3(1, 0, 0),
    new THREE.Vector3(2, 0, 0),
    new THREE.Vector3(1, 1, 0),
    new THREE.Vector3(2, 1, 0)
  );

  const geometry1 = createGeometry(curve1.getPoints(32));

  const curve2 = new THREE.CubicBezierCurve3(
    new THREE.Vector3(-1, 0, 0),
    new THREE.Vector3(-2, 0, 0),
    new THREE.Vector3(-1, 1, 0),
    new THREE.Vector3(-2, 1, 0)
  );

  const geometry2 = createGeometry(curve2.getPoints(32));

  const geometry = THREE.BufferGeometryUtils.mergeBufferGeometries([geometry1, geometry2]);

  const material = new THREE.LineBasicMaterial();

  mesh = new THREE.LineSegments(geometry, material);
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

}

function render() {

  renderer.render(scene, camera);

}

function createGeometry(points) {

  const vertices = [];
  const segments = points.length - 1;

  for (let i = 0; i < segments; i++) {

    const point1 = points[i];
    const point2 = points[i + 1];

    vertices.push(point1.x, point1.y, point1.z);
    vertices.push(point2.x, point2.y, point2.z);

  }

  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

  return geometry;

}

body {
  margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.145/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.145/examples/js/utils/BufferGeometryUtils.js"></script>

- Mugen87