I am facing an issue with a THREE.LineSegments object, where I need to dynamically change the number of vertices. However, when I try to modify the geometry vertices array, the lines with removed vertices remain in place.
Is there a way to remove vertices from the geometry after it has been created?
For example, I have a LineSegments object with 3 segments, and I want to later change it to have only 2 segments. The last line segment persists even after the change.
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>