Question

我有一个class Meta: model = User fields = ('id', 'first_name', 'last_name')对象，并且我想动态更改顶点的数量。但是，当我修改几何顶点数组时，任何带有已删除顶点的线都保持原样。

在创建几何之后是否可以删除顶点？

例如，下面我将一个df.T对象分为3个细分，然后尝试将其更改为只有2个细分。最后一行仍然保留。

THREE.LineSegments

LineSegments

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
  )
}

Answer 1

解决此问题的一种方法是处置旧的几何图形，然后像这样创建新的几何图形：

line.geometry.dispose();

line.geometry = new THREE.Geometry();

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

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

除了布置几何图形之外，还可以创建具有足够缓冲区空间的THREE.BufferGeometry，以便它可以代表应用程序中最大的线对象。这种方法是必需的，因为您无法调整缓冲区的大小，只能更新其内容。详细信息在本指南中说明：

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

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

three.js R103

从THREE.LineSegment中添加和删除顶点

1 个答案: