All Articles Motion
Motion: How to Manipulate a True 3D Box
Iain Anderson on Wed, February 22nd 13 comments
In this article Apple Motion Expert, Iain Anderson, shows you how to create a "real" 3D box and, because he's a generous sort, also provides the project files to download. Go 3D in Motion 5!

While it’s true that Motion lets you work in 3D space, almost everything within it is on a 2D plane. Sometimes you can cheat: for example, particle effects can force each particle to always face the camera. This makes for good-looking flames—but it’s not true 3D. So how can we create and manipulate a real 3D box in Motion? Simple: one face at a time. In this article, we’ll make a die (my inner D&D nerd tells me that’s the singular of the plural “dice”) and then spin it about.

To get started, we’ll create a new Motion project. For more direct integration to Final Cut Pro X, you could choose to create this as a generator, but for now we’ll go with a simple Motion Project. I’ll be using the 1080p24 preset.


Starting out


Step 1 - The 1080p24 Preset

Press Shift-Z to fit the Canvas to your view. Press R to choose the Rectangle Tool, then examine the HUD (press F7, or choose Window > Show HUD if you don’t see it). Make sure the Outline is unchecked before you click to create anything.

HUB no outline


Step 2 - HUD With Outline Unchecked

Hold Shift, then click and drag a square about half the height of the Canvas. Press Shift-Sto choose the Select/Transform Tool, then snap it to the centre of the Canvas. The Inspector should show the position in X and Y as 0.

In the Inspector choose Shape, then below that, Geometry. We’ll now change the values of the four corners of the square so that they’re predictable and easy to manipulate. They should all be set to the same value of 200px, except that the positive or negative status of each point stays as it is now:

  • Point 1: -200, 200
  • Point 2: 200, 200
  • Point 3: 200, -200
  • Point 4: -200, -200

Plane geometry


Step 3 - The Plane’s Geometry

This will make the next step much, much easier: We’re going to create five duplicates of this first plane, then rename and reposition all six to form the sides of a cube. Use the Layers panel to rename and the Inspector to reposition, as follows:

Select the original Rectangle, then press Command-D (for Duplicate) five times, for a total of six faces.

Double-click the original plane (Rectangle) and call it “front”. Choose the Inspector, then Properties, and position it at Z: 200px. Select each of the other duplicates in turn, and apply these names and parameter changes:

  • back, Position Z: -200px
  • left, Position X: -200px, Rotation Y: 90°
  • right, Position X: 200px, Rotation Y: 90°
  • top, Position Y: 200px, Rotation X: 90°
  • bottom, Position Y: -200px, Rotation X: 90°

Finally, double-click the group containing these planes (simply called Group) and call it cube instead.

Cube group


Step 4 - The Cube Group

That’s it — you’ve got a cube, you just can’t see it yet. We need to add a camera to see it in 3D. Press the Camera button, or choose Object > New Camera. Press the “Switch to 3D Groups” button in the dialog that appears.

You’ll now gain a series of three camera controls in the top right of the Canvas area (and a non-functional camera icon to the left). Of the three buttons, you can click and drag directly on the second control, orbit, to spin your camera around the cube so you can see it. Go ahead and spin around.

Camera controls


Step 5 - The Camera Controls

When you’ve had a look about, reset the position:

  • Select the Camera object in the Layers panel.
  • Choose Inspector > Properties.
  • Press the Reset arrow in the top right of the Transform section.
  • To avoid messing up the Camera position in future, you can use an alternative view.
  • Choose View > 3D View > Perspective, or press Control-P.

Bland 3D cube

rotation settings


Step 6 - The Grey Cube

So far, though, our cube is grey and bland. Let’s brighten it up.

Add a light by pressing the Light button next to the Camera button, or choosing Object > New Light. This is a simple, omnidirectional “point light” which emits light in all directions, and it’ll do for our purposes. Unfortunately, it’s inside the cube at the moment.

Select the Light and choose Inspector > Properties. Set X to -400 and Z to 800. This is better, but another light would help a lot more.

Create another Light and set X/Y/Z position to 300/300/500. Choose Inspector > Lightand set Intensity to 900%. This is more than the slider allows, so click on the number (originally 100%) and drag to the right to set 900%, or double-click and just type it in.

This is good, but there’s no light at the back at all. In case you want to spin the camera around there:

Duplicate the second light, then set its X/Y/Z position to -400/300/-1000. Now that we’ve got a cube in space, let’s turn it on its corner. Select the cube group, then set rotation of X to -35° and Z to 45°.

Cube standing on a point


Step 7 - The Cube, With Some Lights Visible Around

To spin the whole thing around, we’ll add a Spin behavior. Choose Library, thenBehaviors > Basic Motion, and select Spin.

The behavior spin


Step 8 - The Spin Behavior In The Library

Select the cube group in the Layers panel, then press the Apply button at the top. Choose Inspector again, then Behaviors, and set the Axis on the Spin behavior to Y. Set the Spin Rate to approximately 400°.

Spin parameters


Step 9 - The Spin Parameters In The Inspector

All good. Now the whole box spins. How about we spin the camera around the box as well? In Library, find Behaviors > Camera and select Sweep. Drag it onto your Camera, and leave it on the default Swivel Y for a quick pan around.

With it still selected, duplicate it (Edit > Duplicate or Command-D) and change the copy’s settings: Tilt X instead of Swivel Y, and to 60° instead of 30°.

Two sweep behaviors applied to the camera


Step 10 - Two Sweep Behaviors Applied To The Camera

Now the camera tilts up while it swivels. Finally, let’s go crazy: Select your cube group in the Layers panel, and Duplicate it. In the Inspector, set the Position X to 750px. Duplicate again, and set Position X to -750px.

Now, you have three spinning boxes with a camera that orbits around them. 

Every face on these cubes could easily be an image; you could change scale to extend a cube in a single dimension; you could turn one into a reflective mirror. If you use this as a starting point for something bigger, please link to it in the comments. Thanks, and good luck!


Download the Motion 5 project files here.



Comments (13)

You must be logged in to comment.

  • KcR
    positioning with those coordinates does not give me a perfect cube - something I'm doing wrong?
    • 7 years ago
    • By: KcR
    Reply
  • Ridadoe
    Well, I just re-followed my own steps, to the end of part 3, and I got a perfect cube. If each side is 400px square, and each side is rotated correctly and positioned at 200px from the center point, it should be right. Not sure what you might have done wrong, but if you want to post a Motion file or a screenshot, I might be able to help.
    • 7 years ago
    • By: Ridadoe
    Reply
  • KcR
    Thanks, maybe my size is wrong, does he state its a 400px sq - I missed that then
    • 7 years ago
    • By: KcR
    Reply
  • KcR
    I thought each side is at 200 px, as per geometry point settings
    • 7 years ago
    • By: KcR
    Reply
  • Ridadoe
    You won't actually type in 400px anywhere. You give -200px to +200px in X and Y, which gives 400px wide and high.
    • 7 years ago
    • By: Ridadoe
    Reply
  • KcR
    as per his geometry settings, I double checked I matched those - still does not look right
    • 7 years ago
    • By: KcR
    Reply
  • Rounik Admin
    Hi KcR, Just to let you know... Iain Anderson, the author of this article and MPV Trainer, is "funwithstuff" (the person who has been assisting you in the comments above)... They are one and the same! ;-)
    • 7 years ago
    • By: Rounik Admin
    Reply
  • Ridadoe
    If you have a picture of what you're seeing and/or a copy of your Motion file, I'd be happy to take a look. I'm the tutorial author, so if there's a problem I'd like to track it down.
    • 7 years ago
    • By: Ridadoe
    Reply
  • KcR
    here's file, thanks http://dl.dropbox.com/u/3185488/cube.motn
    • 7 years ago
    • By: KcR
  • KcR
    sure, is there a way to attach a file
    • 7 years ago
    • By: KcR
    Reply
  • Rounik Admin
    The best way to attach a file is to use a service like box.net or yousendit.com then paste the address here.
    • 7 years ago
    • By: Rounik Admin
    Reply
  • Ridadoe
    Found the problem in your file. The front side hadn't been moved, but it should have had Z: 200. The left side was moved to X: -200 AND Z: 200, but it should only have had X moved. So, it looks like you had the left side selected when you changed Z to 200 rather than the front side. Also, the back side needed -200 not +200. For anyone checking this, Right/Left are +/- on X, Top/Bottom are +/- on Y, and Front/Back are +/- on Z. All other values should be 0.
    • 7 years ago
    • By: Ridadoe
    Reply
  • KcR
    Thanks for the follow up and diagnosis - will retry the steps
    • 7 years ago
    • By: KcR
    Reply
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: