我有一个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 ) }@H_403_12@body { margin: 0; padding: 0; }@H_403_12@<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>@H_403_12@
最佳答案
解决此问题的一种方法是处置旧的几何图形,然后创建新的几何图形,如下所示：
line.geometry.dispose(); line.geometry = new THREE.Geometry(); line.geometry.vertices = [ verts[0],verts[2] ];@H_403_12@下面的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
