Improving the sense of scale and navigation in high energy physics event visualization

This project aims to improve the scale and navigation inside the Phoenix application which is basically an Angular-based web application written in the ThreeJS library to visualize high-energy physics events in 3D. The application renders a detector that detects the collisions of particles that have been accelerated up to speeds comparable to that of light, along with the event data that consists of tracks, jets, missing energy, etc. after the collision. The problem statement is to improve the visualization of the event, for example, by developing a customizable and interactive cartesian grid functionality, so as to better give the idea of the locations and distances of the particles to the researchers. Also, the user should be able to view the dimensions of the individual detector parts. Apart from this, the users should be able to navigate to the individual detector parts. My plan for the first problem is to introduce a 3D cartesian grid with multiple equally spaced XY, YZ, and ZX planes, as well as, to be able to display the 3D coordinates of a point on clicking. For this, I will make use of the ThreeJS raycaster intersects. Also, I am planning to render the Euclidean distance between any two points clicked. To view the dimensions of the detector, I am planning to render the dimensions of the bounding box of the component. The solution for the second problem would be to list the detector parts and let the user select any one of them, after which it will be highlighted using a ThreeJS outline pass.