我有一个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()
];
var geom = new THREE.Geometry();
geom.vertices = [
verts[0],verts[1],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()
];
line.geometry.vertices = [
verts[0],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>最佳答案
解决此问题的一种方法是处置旧的几何图形,然后创建新的几何图形,如下所示：
line.geometry.dispose();
line.geometry = new THREE.Geometry();
line.geometry.vertices = [
verts[0],verts[2]
];
下面的fiddle中演示了此方法.但是,请考虑使用THREE.BufferGeometry,以便获得更可靠的解决方案(THREE.Geometry在某些时候不再可渲染).这是一个具有相同代码但带有THREE.BufferGeometry的fiddle.
除了布置几何图形,还可以创建具有足够缓冲区空间的THREE.BufferGeometry,以便它可以代表应用程序中最大的线对象.这种方法是必需的,因为您无法调整缓冲区的大小,只能更新其内容.详细信息在本指南中说明：
https://threejs.org/docs/index.html#manual/en/introduction/How-to-update-things
顺便说一句：在three.js中渲染线图元时,设置线宽无效.始终具有1个像素的宽度.
three.js R103
