Now that I had the basic functionality of the Bees project up and running, the next feature requested was a set of camera modes. These camera modes would allow the user to easily switch between various vantage points around the bee model. In this post I’ll cover the various camera modes added, new secondary features that were added along with the camera modes, and information about the development process. A playable prototype demo of the camera modes iteration of this project can be found at the following link.

Bees Project Camera Modes Demo

New Camera Modes

The original camera mode for this project was a 3D perspective vantage point which displays the bee model from diagonally above and slightly to one side. This view makes it easy to distinguish 3D elements of the bee’s anatomy but can make it difficult to determine the relative placement of some of its smaller body parts in relation to others. To overcome this issue, I decided to add four isometric camera modes to allow the user to view the bee at direct angles from the side, the top, the front, and the rear. With the click of a menu button the user could now snap the camera to each of these camera mode view points.

New Overlays

Once the new camera modes were set up, I saw an opportunity to implement a prototype version of an overlay feature that the development team had mentioned possibly adding to the project. These overlays would allow us to add additional information and levels of detail relevant to specific vantage points. In this iteration of the project the prototype overlays are visible on the top camera mode and display placeholder images representing more detailed anatomic images of a bee. I also built a prototype version of an overlay/view specific set of labels used to highlight specific features relevant to the active camera mode.

After building the initial prototypes I realized that these overlays, although helpful, may obscure the view of the actual bee model body parts they hovered over. To prevent this problem, I build an overlay opacity slider into the menu. This slider allows the user to select the overlays, the labels, or both and make them appear more or less transparent based on the user’s needs.