Creating a simple diorama
Now, we will add a few objects to the scene to set up the environment, including a unit cube, a flat plane, a red ball, and a photographic backdrop.
Adding a cube
Let's add the first object to the scene—a unit-sized cube.
Within the Hierarchy panel, use the Create menu and choose 3D Object | Cube. The same selection can also be found in the main menu bar's GameObject dropdown.
A default white cube is added to the scene, centered on the ground plane at the (0, 0, 0) position with no rotation and a scale of one, as you can see in the Inspector panel. This is the Reset setting, which can be found in the object's Transform component of the Inspector panel
If for some reason, your cube has other Transform values, set these in the Inspector panel or locate the small gear icon on the upper right-hand side of the Inspector panel's Transform component, click on it, and select Reset.
This cube has the dimensions of one unit on each side. As we'll see later, one unit in Unity corresponds to one meter in world coordinates. Its local center is the center of the cube.
Adding a plane
Now, let's add a ground plane object into the scene.
In the Hierarchy panel, click on the Create menu (or main GameObject menu) and choose 3D Object | Plane.
A default white plane is added to the scene, centered on the ground plane at position (0, 0, 0). (If necessary, select Reset from the Inspector panel's Transform component's gear icon). Rename it to GroundPlane
.
Note that at a scale of (1, 1, 1), Unity's plane object actually measures 10 by 10 units in X and Z. In other words, the size of GroundPlane
is 10x10 units and its Transform component's Scale is 1.
The cube is centered at Position (0, 0, 0), just like the ground plane. However, maybe it doesn't look like it to you. The Scene panel may show a Perspective projection that renders 3D scenes onto a 2D image. The Perspective distortion makes the cube not seem centered on the ground plane but it is. Count the grid lines on the either sides of the cube! As you'll see, when it is viewed in VR and you're actually standing in the scene, it won't look distorted at all. This is shown in the following screenshot:
The cube is submerged in the ground plane because its local origin is at its geometric center—it measures 1 by 1 by 1 and its middle point is (0.5, 0.5, 0.5). This might sound obvious, but it is possible for the origin of a model to not be its geometric center (such as one of its corners). The Transform component's position is the world space location of the object's local origin. Let's move the cube as follows:
- Move the cube onto the surface of the ground plane—in the Inspector panel, set its Y position to 0.5: Position (0, 0.5, 0).
- Let's rotate the cube a bit around the y-axis. Enter
20
into its Y-rotation: Rotation (0, 0.5, 0).
Note the direction in which it rotates. That's 20 degrees clockwise. Using your left hand, give a thumbs-up gesture. See the direction your fingers are pointing? Unity uses a left-handed coordinate system. (There is no standard for the coordinate system handedness. Some software use left-handedness, others use right-handedness).
Adding a sphere and some material
Select GameObject | 3D Object | Sphere from the menu.
Like the cube, the sphere has a radius of 1.0, with its origin at the center. (If necessary, select Reset from the Inspector panel's Transform component's gear icon). It's hard to see the sphere as it is embedded in the cube. We need to move the sphere's position.
This time, let's use the Scene panel's Gizmos component to move the object. In the Scene view, you can select graphical controls or gizmos to manipulate the objects' transforms, as illustrated in the following image, from the Unity documentations (http://docs.unity3d.com/Manual/PositioningGameObjects.html):
In the Scene panel, with the sphere selected, make sure that the Translate tool is active (second icon on the top left icon toolbar) and use the arrows of the x, y, and z axes to position it. I left mine at Position (1.6, 0.75, -1.75).
Before we go much further, let's save our work, as follows:
- From the main menu bar, select File | Save Scene and name it
Diorama
. - Also, navigate to File | Save Project for good measure. Note that in the Project panel, the new scene object was saved in the top level Assets folder.
Let's add some color to the scene by making a couple of colored materials and applying them to our objects. Follow these steps:
- In the Project panel, select the top-level Assets folder and select Create | Folder. Rename the folder to
Materials
. - With the
Materials
folder selected, select Create | Material and rename it toRed
. - In the Inspector panel, click the white rectangle to the right of Albedo, which opens the Color panel. Choose a nice red.
- Repeat the preceding steps to make a blue material too.
- Select Sphere from the Hierarchy (or Scene) panel.
- Drag the
Red
material from the Project panel into the Inspector panel for the sphere. The sphere should now look red. - Select Cube from the Scene (or Hierarchy) panel.
- This time, drag the
Blue
material from theProject
panel into the scene and drop it onto the cube. It should now look blue.
Save your scene and save the project. Here's what my scene looks like now (yours might be a little different, but that's OK):
Changing the scene view
You can change the scene view any time in a number of ways, and this varies depending on whether you have a 3-button or a 2-button track pad, or Mac with only one button. Read up on it in the Unity manual, which can be found at http://docs.unity3d.com/Manual/SceneViewNavigation.html, to find out what works for you.
In general, combinations of left/right mouse clicks with Shift/Ctrl/Alt keys will let you perform the following actions:
- Drag the camera around.
- Orbit the camera around the current pivot point.
- Zoom in and out.
- Alt + right-click of the mouse swings the current eye orbit up, down, left, and right.
- When the Hand tool is selected (in the upper left icon bar), the right mouse button moves the eye. The middle-click of the mouse does a similar move.
In the upper right-hand side of the Scene panel, you have the Scene View gizmo, which depicts the current scene view orientation as shown in the following screenshot. It may indicate, for example, a Perspective view, with X extending back to the left and Z extending back to the right.
You can change the view to look directly along any of the three axes by clicking on the corresponding colored cone. Clicking on the small cube in the center changes the Perspective view to the Orthographic (nondistorted) view as shown in the following screenshot:
Before moving on, let's first align the scene view with the Main Camera direction. You may recall me saying that the default camera orientation, (0, 0, 0), is looking down the positive Z direction (back to front). Follow the following steps:
- Click on the red X cone on the Scene view gizmo to adjust the view from the Back (back direction), looking forward.
- Also, use the Hand tool (or the middle mouse-button) to slide the view up a tad.
Now, when you select the Main Camera component (from the Hierarchy panel), you will see that the Scene view is roughly similar to the Camera Preview, looking in the same direction. (See the screen capture image shown in the following section for what the scene and preview looks like with this view direction after we add the photo).
Adding a photo
Now, let's add a photo for the backdrop of our diorama.
In computer graphics, an image that is mapped onto an object is called a texture. While objects are represented in the X, Y, and Z world coordinates, textures are said to be in the U, V coordinates (such as pixels). We'll see that textures and UV maps can have their own scaling issues. Follow the following steps:
- Create a plane by navigating to GameObject | 3D Object | Plane and rename it
PhotoPlane
. - Reset the plane's transform. In the Inspector panel, find the gear icon in the upper right-hand side of the Transform pane. Click on this icon and select Reset.
- Rotate it by 90 degrees around the z-axis (set its Transform component's Rotation value of Z to
-90
). That's minus 90. So, it's standing up, perpendicular to the ground. - Rotate it by 90 degrees around the y-axis so that its front is facing us.
- Move it to the end of the ground plane at Position value of Z =
5
and above, at Position value of Y =5
(you may recall that the ground plane is 10x10 units). - Choose any photo from your computer to paste on this photo plane using Windows Explorer or Mac Finder. (Alternatively, you can use the
Grand Canyon.png
image that comes with this book). - In the Project panel, select the top-level Assets folder and navigate to Create | Folder. Rename the folder to
Textures
. - Drag the photo file into the
Assets/Materials
folder. It should automatically import as a texture object. Alternatively, you can right-click on the Assets folder, select Import New Asset…, and import the picture.
Select the new image Texture in the Project panel and review its settings in the Inspector panel. For whatever reason, even if the original photo was rectangular, the texture is square now (for example, 2048x2048) and looks squished. When you map it onto a square-shaped face, it will be squished there too. Let's see using the following steps:
- Drag the photo texture from the Project panel onto the photo plane (in the Scene panel).
Oops! In my case, the picture is rotated sideways (yours too?)
- Select
PhotoPlane
(the photo plane) and set Transform component's Rotation value of X to90
degrees.OK, it's upright, but still squished. Let's fix this. Check the original resolution of your photo and determine its aspect ratio. My
Grand Canyon
image was 2576x1932. When you divide its width by its height, you get the 0.75 ratio. - In Unity, set the
PhotoPlane
plane's Transform component's Scale value of Z to0.75
.Because its scale origin is the center, we also have to move it back down a bit.
- Set Position value of Y to
3.75
.
We have the size and position set up, but the photo looks washed out. That's because the ambient lighting in the scene is affecting it. You might want to keep it that way, especially as you build more sophisticated lighting models and materials in your scenes. But for now, we'll un-light it.
With PhotoPlane
selected, note that the photo's Texture component in the Inspector panel has its default Shader component as Standard. Change it to Unlit | Texture.
Here's what mine looks like; yours should be similar:
There! That looks pretty good. Save your scene and project.