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:
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