3D - Go Around the Globe (Difficulty: 1)

CreatiCode

Key Topics Covered

Introduction

In this tutorial, you will build a project that tells us where is your home country and where you would like to visit:

Step 1 - Load the “Globe” Scene

Please create a new project on the CreatiCode playground, remove the dog sprite, and add these blocks in the “Empty1” sprite.

Load the “Globe” scene using the “initialize 3D scene” block in the “3D Scene” category.

Now you can rotate the camera around the globe:

Step 2 - Find where you are on the globe

Now please try to find where you are on the globe by rotating and zooming the camera. For example, suppose your location is close to Chicago (USA), you can try to put that at the center of the camera view:

Step 3 - Move the Camera Automatically

Now we want to move the camera automatically so the user will not have to rotate the camera.

To move the camera, you need to use the “set camera” block. And to find out the camera position, you can use the camera property reporter block. Here is how to use both of them together:

So your program should look like this after you are done. It will move the camera to where you are on the globe automatically.

Step 4 - A New Button for Destination

Next, let’s add a button for jumping to your destination on the globe. Add the “widget” extension, then add the “add button” block.

For example, suppose you would like to visit Spain. Then you can set the text on the button to “Spain”.

After you click this block (by itself), a new button will be added at the center of the screen. You can turn on the “widget position” tool, and then move or resize the button. The numbers in the “add button” block will change accordingly.

Here is an example of the final program with the new block:

Step 5 - Handle The Button Click Event

When the user clicks the button, we want to switch the camera to look at Spain on the globe. That logic can be implemented with 2 blocks:

Note that for the “when widget named xx clicked” block, the “buton1” will not appear in the dropdown if you haven’t added that button yet. In other words, you need to first run the “add button” block above at least once before using this “when” block.

Now we just need to find out the exact camera distance and angles. The method is very similar to steps 2 and 3. We first move the camera by hand, then find out the camera parameters.

Now your program should contain 2 stacks:

Step 6 - Camera Animation

Currently, when the user clicks the “Spain” button, our camera would jump to the new view. To make the transition more smooth, we can add some animations, similar to what we see in Google Earth.

There can be many ways to move the camera. In this example, we will first zoom the camera out by increasing its distance from the globe to 11000 in 1.5 seconds. Second, we will keep the distance, but rotate the camera to the new angles in 3 seconds. Lastly, we zoom in on the camera to get closer to Spain in 1.5 seconds:

Now we get a pretty good camera animation:

Creative Ideas

You can apply this idea to build many other interesting projects that show different parts of the globe. Here are some ideas for you to explore:

You can change the color of the button to make it look better
You can add another “Home” button that will bring the camera back to your current location on the globe.
You can build a project that shows the world’s largest/smallest/most populated countries on the globe.