I have to create millions of vectors based on the coordinates. I am using THree.js LineSegments for the same and it is pretty good performance wise. But to implement selection of area on drag the fps drops to 0. It is because I am creating those many individual LineSegments to be added to Object3D(helperObj) which can be used by SelectionBox. Although I am not adding the Object3D(helperObj) to scene still because of so many draw calls inside the loop it is causing the performance issue. For showing the lines I am using BufferGeometry and pushing the coordinates inside loop and adding them at once after the loop is over(lineGeometry in the working example).
/** code causing performance issue starts**/ const geo = new THREE.InstancedBufferGeometry(); geo.setAttribute('position', new THREE.Float32BufferAttribute([x1, y1, 0, x2, y2, 0], 3)); const helperLine = new THREE.LineSegments(geo, hoveredMaterial); helperLine.visible = false; helperLine.userData = "row:"+i; helperObj.add(helperLine); /** code causing performance issue ends**/
I need some data that I am adding in userData of helperObj for doing some operations. Is there any other way I can add userData without creating multiple LineSegments.
Working example : https://codepen.io/raksha-jain/pen/JjWPVbK
Can someone please help?