Mesh editing: Faces

Implemented editing the mesh of the object by moving the face. But this solution is very resource-intensive. It can be seen when there are a lot of triangles in the object. The reason for this is that I create an auxiliary triangle for each triangle of the object, and when the triangle moves, I delete them all and create them again.

As a solution, I decided to make an auxiliary triangle only for the triangle that I am going to move. Now for this I realized the creation of such a triangle with the movement of the mouse. This will highlight the triangle that you can select

transformMesh( editHelper ) {

		if( this.mode === 'Vertices'){

			this.moveVertex( editHelper.object.userData.vertexNumber, editHelper.object.position );

		}

		if( this.mode === "Faces" ){

			let sphereName = editHelper.object.name;

			let face = editHelper.object.parent.getObjectByName( editHelper.object.name.replace('Sphere','') );
			let sphere = editHelper.object;

			let shift = sphere.position;

			shift.subVectors( sphere.position, face.userData.baryCenter )

			face.position.set( shift.x, shift.y, shift.z );

			let attrArray = face.geometry.attributes.position.array;
			let vertices = [];

			for (let i = 0; i < attrArray.length; i += 3 ) {

				vertices.push( new Vector3( attrArray[i], attrArray[i+1], attrArray[i+2]));
		
			}

			let verticesNumbers = face.userData.verticesNumbers;

			for (let i = 0; i < verticesNumbers.length; i ++ ) {

				let pointNumber = verticesNumbers[ i ];

				let point = vertices[ i ].clone();

				let pointPosition = point.add( face.position.clone() ).clone();

				this.moveVertex( pointNumber, pointPosition );

				this.removeMeshHelpers();
				this.createMeshHelpers();

				let sphere = this.ta_Scene.scene.getObjectByName( sphereName );

				this.ta_Scene.transformControls.attach( sphere );

			}


		}

	}