three.js - 在 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())

结果，想要的图形出现了，但是连接它们的地方多了一条线。

line

如果我在合并时更改顺序，那么我会得到不同的行。我不明白如何解决这个问题。

line2

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>