Zoetrope アイキャッチ画像

How to create Zoetrope with 3D model

In this tip, I will show how to create a zoetrope in VR using the principle of animation. It has a visual effect like ‘frame drop’, so it’s a useful expression when you want to introduce a unique atmosphere to space design.

I use ‘jumping astronauts’ as an example to explain the procedure, but this method can be applied to any 3D objects. So read this article to increase your variations of visual expressions.

 

STYLY

Sample

You can taste the sample space from STYLY GALLERY.
Astronaut Zoetrope

 

You can download the Unity project introduced in this article from the link below.
This time, we use the ‘ZOETROPE’ folder in STYLY_Examples.
STYLY_Unity_Examples

 

Preparation

▼If you want to learn the basics to use Unity, refer to the article below▼

Get 3D model

Firstly, get the 3D model ‘Z2 Spacesuit’ from the official NASA site shown below.

NASA 3Dmodel Z2 Spacesuit (Reference source: NASA)

(Please check the user policy for the models NASA provides from here)

・3D model ‘Z2 Spacesuit’

今回使用する 3D モデル

3D model to use in this article

 

Import 3D model to Unity

Launch Unity and drag the ‘Z2’ folder containing the data downloaded, into the ‘Asset’ folder in the ‘Project’ window. Now the preparation has been completed.

「Asset」内に「Z2」のフォルダができていればインポート完了

If it’s imported successfully, you will see the ‘Z2’ folder in ‘Asset’.

 

What is Zoetrope?

Zoetrope is a rotation-type flip animation, which has a mechanism that creates the illusion of the motion by rotating sequenced pictures or objects.

What makes the images ‘animated’ is an illusion created when gradually-changing images keep passing in front of your eyes. Zoetrope is a toy with this mechanism, which was invented and got popular around the 19th century. By using the mechanism of Zoetrope, you can create animation not only with 2D material such as paper, film, but also with a 3D object such as a figure doll, or 3D model. In this tip, I introduce the procedure to create 3D Zoetrope in VR space by using 3D models.

 

Arrange 3D models

The models need to equally spaced and arranged in a circle to create a zoetrope. 
We arrange the 3D models in the following order.

A. Basic settings for 3D model

B. Duplicate the model set up in Procedure A.

C. Arrange the duplicated models in a circle.

A. Basic settings for 3D model

[A-1]
Place the floor where the models can jump. In the Hierarchy window, select ‘Create > 3D Object > Plane’.

STYLY

Create a floor

 

[A-2]
Resize the Plane. In the ‘Transform’ field on the Inspector tab, set the X and Z value of ‘Scale’ to 10.

床のサイズを変更する

Resize the floor

 

[A-3]
Drag the ‘Z2’ 3D model under the ‘Z2’ folder in the Project window, into the Hierarchy window to add.

[A-4]
With the ‘Z2’ folder selected in the Hierarchy window, set the X, Y and Z values of ‘Scale’ to 5 in the Transform field on the Inspector tab

[A-5]
In the ‘Transform’ field on the Inspector tab, set the Z value of ‘Position’ to -30.

[A-3]~[A-5]の作業

Procedure [A-3]  to [A-5]

 

[A-6]
Right-click on the Hierarchy window and select ‘Create empty’ to create an empty GameObject (It is displayed as ‘GameObject’ in the window).

[A-7]
Select the ‘GameObject’ created in Procedure A-6 and check that the X, Y and Z values of ‘Position’ are set to ‘0’ in Transform field on the Inspector tab.

「GameObject」の「Position」を確認する

Check the ‘Position’ values in ‘GameObject’

 

[A-8]
Drag ‘Z2’ in the Hierarchy window into the ‘GameObject’.

空の 「GameObject」に「Z2」をドラッグ & ドロップ

Drag and drop ‘Z2’ into the empty ‘GameObject’.

 

B. Duplicate 3D model set up in Procedure A (Convert into Prefab and then Duplicate)

[B-1]
Right-click ‘Asset’ in the Project window and select ‘Create > Folder’ to create a folder. Rename it ‘Zoetrope’.
Then, drag and drop the ‘GameObject’ in the Hierarchy window into the ‘Zoetrope’ folder (i.e. convert it into Prefab).

オブジェクトの Prefab 化

Convert the object into Prefab

 

[B-2]
Drag the ‘GameObject’ Prefab created in the ‘Zoetrope’ folder into the Hierarchy window to duplicate ‘GameObject’ in the Scene. Repeat it 24 times to create 24 objects.

[B-3]
After duplicating, delete the unnumbered ‘GameObject’ in the Hierarchy window.

オブジェクトを 24 回コピー

Duplicate the object 24 times

 

C. Arrange duplicated 3D models in a circle

Arrange in a circle the 24 objects duplicated in the Hierarchy window (‘GameObject (1) ~ ‘GameObject (24)’).

Use the ‘Rotation’ field to move an object along a circle or sphere. the X, Y and Z value corresponds to the rotation angle for each axis. For example, the object rotates around Y-axis by 15 degrees when setting the Y value of ‘Rotation’ from 0 to 15. Arrange the astronauts in a circle by using this function.

Select each object and enter the Y value of ‘Rotation’ in the Transform field on the Inspector referring to the ‘Rotation Y’ values in the table below.

それぞれの「GameObject」-「Rotation」- Y に入力

Enter the ‘Rotation Y’ value for each GameObject

 

Object Name Rotation Y
GameObject (1) 0
GameObject (2) 15
GameObject (3) 30
GameObject (4) 45
GameObject (5) 60
GameObject (6) 75
GameObject (7) 90
GameObject (8) 105
GameObject (9) 120
GameObject (10) 135
GameObject (11) 150
GameObject (12) 165
GameObject (13) 180
GameObject (14) 195
GameObject (15) 210
GameObject (16) 225
GameObject (17) 240
GameObject (18) 255
GameObject (19) 270
GameObject (20) 285
GameObject (21) 300
GameObject (22) 315
GameObject (23) 330
GameObject (24) 345

Table: ‘Rotation Y’ values

Next, we set up the motion.

 

Set up the motion

Each 3D model needs to change its shape little by little to express motions in Zoetrope. In this tip, we shift each model vertically to create an effect like ‘jumping’.

You can shift the models by adjusting the ‘Position’ values. Firstly, select ‘GameObject (1)’ and set the Y value of ‘Position’ to ‘0.2’ in the Transform field on the Inspector tab. It vertically shifts ‘GameObject (1)’ a bit.

Then, enter the values for ‘GameObject (2)’ to ‘GameObject (24), referring to the table (Position Y) below.

「GameObject(1)」を選択「Inspector」タブ→「Transform」→「Position」の Y に入力

Select ‘GameObject (1)’ and enter the Y value of ‘Position’ in the Transform field on the Inspector tab.

 

Object Name Position Y
GameObject(1) 0.2
GameObject(2) 0.4
GameObject(3) 0.6
GameObject(4) 0.8
GameObject(5) 1
GameObject(6) 1.2
GameObject(7) 1.4
GameObject(8) 1.6
GameObject(9) 1.8
GameObject(10) 1.6
GameObject(11) 1.4
GameObject(12) 1.2
GameObject(13) 1
GameObject(14) 0.8
GameObject(15) 0.6
GameObject(16) 0.4
GameObject(17) 0.2
GameObject(18) 0
GameObject(19) 0
GameObject(20) 0
GameObject(21) 0
GameObject(22) 0
GameObject(23) 0
GameObject(24) 0

Table: Position Y

 

Set Rotational Speed of Zoetrope

Next, set up the animation to rotate all the 3D models together.

1. Right-click on the Hierarchy window and select ‘Create empty’ to create an empty GameObject (It’s displayed as ‘GameObject’ in the window). Then, rename it ‘Rolling Object’.

2. Drag and drop all the model, ‘GameObject (1)’ to ‘GameObject (24)’, into ‘Rolling Object’.

3. With ‘Rolling Object’ selected, select ‘Animation’ from the ‘Window’ menu on the toolbar to open the ‘Animation’ window.

4. Click ‘Create’ in the ‘Animation’ window and follow the messages to save the Animation data to the default place. Then, it brings up the timeline.

「Animation」の設定

Set up ‘Animation’

 

5. Next, in the ‘Animation’ window, press ‘Add Property’ button to open the menu. Select ‘Transform > Rotation’ from the menu and press the ‘+’ button next to ‘Rotation’.

「Add Property」を操作

Use ‘Add Property’

 

6. Next, place Keyframes. Keyframe is a marker to set the timing of the motion.
Firstly, find the two fields to enter values in the ‘Animation’ window. Then, set the lower field to 60 and the upper field to 120 (See the screenshot below).

7. Press the ‘Add Keyframe’ button (See the screenshot below). It places the ‘◇’ maker in the timeline, which means that a Keyframe has been placed at the 120th frame (= 2 seconds). Note that the Keyframe at the 60th frame (= 1 second) has already been set by default.

タイムラインの設定

The setting for the timeline

 

8. Then, set each value shown in the table (the timing for Keyframe) for the upper field in the Animation window, and press ‘Add keyframe’ each time to place Keyframe.

The timing for Keyframes
120
180
240
300
360
420
480
540
600

Table: The timing for Keyframes

 

9. Next, press the ‘Record’ button in the Animation window. If the fields shown in the screenshot below turn red, following your operations (as instructed in the next procedure, Procedure 10) will be recorded as the ‘Animation’ data.

「Animation」の録画状態について

The ‘Recording’ state of the ‘Animation’ window

 

10. Set up the rotation. Referring to the example below, enter the values (the setting for the rotation) shown in the table below.

Example: in the case of the 60th frame
Enter ’60’ in the upper field in the ‘Animation’ window and then enter ‘1800’ in ‘Rotation Y’ on the Inspector tab.

 

The timing for Keyframes Rotation Y
0 0
60 1800
120 3600
180 5400
240 7200
300 9000
360 10800
420 12600
480 14400
540 16200
600 18000

Table: The setting for the rotation

Now, it’s completed.

Press the PLAY button in the GAME window to start the Zoetrope.

 

Upload to STYLY

Read this article to learn how to upload an asset from Unity to STYLY.

The more you add motions such as moving the astronauts’ hands, making them dance, the more complicated and original your Zoetrope will be.

(Example: Maillots de bain)

Please try making various Zoetropes.