Move and rotate camera to focus on object

Questions
1

Hi everyone,
I’m working on a tool to visualize a 3D map of a warehouse. I’m also using OrbitControls. Basically it’s multiple rows of simple box geometries stacked together like so:

boxes

The browser window is then embedded in a Java program, and on the right side there’s a grid (swing components) with all the database records for these boxes. I’m trying to add a “select” feature of sorts, where the user clicks on a record in the grid and in the browser the camera moves to focus on the box and highlights it (changing the color). I can already identify the box relative to the selected record and change its color, so none of that is a problem. I’m just stuck at handling the camera in a decent way.

This is what I have so far:

controls.target.copy(box.position);
camera.position.y = 30;
camera.position.z = 30;
box.userData.setSelected(); // method I added that changes the color to bright green
controls.update();

Basically I just target the box and then move the camera back a bit. It works, but it’s pretty janky and sometimes the selected box ends up behind other rows of boxes and it’s not visible. I would like to avoid that and have the selected box in the middle of the screen so that it’s visible and as obvious as possible. I think this implies moving, rotating and angling the camera, what’s a good way to handle all of that for rows of objects?

I put together a quick and dirty fiddle here: https://jsfiddle.net/jvhc5Lsa/
You can select something by running focus(n) in the console, where n is a number between 0 and 30

2

If what you want to do is to find an angle at which selected box is visible, it can be (1) very demanding and require a lot of raytracing, pathfinding or probing, plus (2) it may be impossible if box is completely obstructed.

Would hiding / lowering opacity of the boxes between camera and the selection be sufficient (or even adding a fancy animation of moving the boxes out of the way)? This could be easily done with a single ray between selection and camera.

3

That’s a good enough workaround that I hadn’t thought about. I just tried looping all the boxes and lowering the opacity of everything that is not selected and it doesn’t look too bad

4

You can also try using Raycaster to cast a ray between the camera and the selected box - then lower the opacity of all intersected objects.