I'm creating a webapplication in which I render multiple objects using Three.js. These objects are saved in a list and can be connected to each other (but don't have to be), and when they are, they are rendered next to each other.
The user can select an object in this list using the UI that I made.
An example of how the objects can be positioned is in the image below. When I select the most left object I want the whole chain to be rendered, but not the 'singular' objects that are in the same list.
I hope this is clear enough, if not I will gladly elaborate.
Now the problem that I'm having:
The (simplified) list can look like this:
{
id: 1,
connectedObjects: [{ id: 2 }, { id: 5 }],
},
{
id: 2,
connectedObjects: [{ id: 1 }, { id: 3 }],
},
{
id: 3,
connectedObjects: [{ id: 2 }, { id: 4 }],
},
{
id: 4,
connectedObjects: [{ id: 3 }],
},
{
id: 5,
connectedObjects: [{ id: 1 }],
},
{
id: 6,
connectedObjects: [],
},
{
id: 7,
connectedObjects: [],
},
{
id: 8,
connectedObjects: [],
},
];
Now I want to write an algorithm that checks which objects are all in the same 'group' as the selected object. So the last three (6, 7, 8) will not be rendered.
This is in JavaScript but if someone points me in the right direction with some pseudocode or a general idea that would be great!
