Best way to add dynamic external object

[Mathieu S]

I want to surround some of my nodes with externals objects to create kind of groups of nodes.

I am doing it using the onEngineTick callback. I am getting all of my nodes coordinates and create a THREE.ConvexGeometry.

here is a simplify version

this.Graph.onEngineTick(() => {
  const coordinates = []
  forEach(node => 
      coordinates.push(getCoordinates(node))
  )
  const existingMesh = this.Graph.scene().getObjectByName(MESH_ID);
  const convexGeometry = new ConvexGeometry(coordinates);

  if (existingMesh) {
        existingMesh.geometry.dispose();
        existingMesh.geometry = convexGeometry;
  } else {
        const meshMaterial = new THREE.MeshLambertMaterial();
        const mesh = new THREE.Mesh(convexGeometry, meshMaterial);
        mesh.name = MESH_ID;
        this.Graph.scene().add(mesh);
  }
}

The problem is that on every tick there's a lot of calculation to determine the coordinates and the geometry.

I wanted to know if there are good practices to add a dynamic external element, if to use onEngineTick is judiscious for this example or if there is another way ?

Thanks for the potential ideas