javascript - 从 THREE.LineSegment 添加和删除顶点

Question

我有一个 THREE.LineSegments 对象，我想动态更改顶点数。但是，当我修改几何顶点数组时，任何带有已删除顶点的线都将保留原样。

有没有办法在创建几何体后删除顶点？

例如，下面我采用了一个包含 3 个线段的 LineSegments 对象，并尝试稍后将其更改为只有 2 个线段。保留最后一条线段。

var scene,
    renderer,
    camera;

var line;

initScene();
initLine();

setInterval(update, 500);


function initScene() {

  camera   = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000),
  scene    = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();

  camera.position.z = 5;
  scene.add(camera);

  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

}

function initLine() {

  var verts = [
    randomV3(),
    randomV3(),
    randomV3(),
    randomV3()
  ];

  var geom = new THREE.Geometry();

  geom.vertices = [
    verts[0], verts[1],
    verts[1], verts[2],
    verts[2], verts[3]
  ];

  line = new THREE.LineSegments(geom, new THREE.LineBasicMaterial({
    color: 0xff00ff,
    linewidth: 3
  }));

  scene.add(line);
  renderer.render(scene, camera);

}

function update() {

  var verts = [
    randomV3(),
    randomV3(),
    randomV3()
  ];

  line.geometry.vertices = [
    verts[0], verts[1],
    verts[1], verts[2]
  ];
  line.geometry.verticesNeedUpdate = true;

  renderer.render(scene, camera);

}

function randomV3() {
  return new THREE.Vector3(
    (Math.random() * 4) - 2,
    (Math.random() * 4) - 2,
    0
  )
}

body {
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>

Answer 1

解决这个问题的一种方法是处理旧的几何体，然后像这样创建一个新的几何体:

line.geometry.dispose();

line.geometry = new THREE.Geometry();

line.geometry.vertices = [
  verts[0], verts[1],
  verts[1], verts[2]
];

此方法在以下 fiddle 中进行了演示.但是，请考虑使用 THREE.BufferGeometry 以获得更适合 future 的解决方案(THREE.Geometry 在某些时候将不再可渲染)。这是一个fiddle使用相同的代码，但使用 THREE.BufferGeometry。

除了处理几何图形，您还可以创建一个具有足够缓冲区空间的 THREE.BufferGeometry，以便它可以表示应用程序中最大的线对象。这种方法是必要的，因为您不能调整缓冲区的大小，只能更新它们的内容。本指南中解释了详细信息:

https://threejs.org/docs/index.html#manual/en/introduction/How-to-update-things

顺便说一句:在 three.js 中渲染线图元时，设置 linewidth 无效。始终具有 1 个像素的宽度。

three.js R103