Interactive multilevel 3d map.

In this tutorial we are going to make a map of vitrual country divided into 3 clickable lands which once clicked on will show the land with another level of division. Each land is divided into smaller pieces. Let's call them regions. Clicking on the region returns to the main map. This is how it works:

Here we have a map that we are going to convert into 3D object in Esquimo.

Creating geometry

There are two ways to do this. Using one of the built-in Esquimo objects - Linear extrude that build a 3d object based on a drawn 2D contour. If you have got already done 3D map object in other 3d software you can import geometry into Esquimo. At the time of writing this tutorial ( version 1.1)  Esquimo supports only 3DS format. However 3DS is one of the most popular 3d file format and great majority of 3d software enable export their scenes to 3DS.

Ok, let's  focus on the first way of building 3d country object. Launch Esquimo or create a new scene if you have it opened already. In Geometry container select Linear extrude object. Before you start drawing contour of the first land load reference bitmap into Linear Extrude internat editor. It will be very helpfull in drawing the contour.

To make the process comfortable move the horizontal seperator line up increasing available area and zoom in the map. Additionally you can use a Zoom parameter that enable to change the size of the reference image. It is also used when you need to adjust the size of newly created contour to those existing in the scene already. In this case you have just created empty scene and don't have one but you can use it to enlarge reference image even more. When I was doing this tutorial I've set it to 1.9. Set subsequent points of the contour by clicking on the map along the boundary of the land. To make it clear again, we assumed the land is the area on the map filled with one color and It is divided into regions with a thin gap. We will create region objects in further stage of this tutorial.

Keeping in mind performance issues you can deploy points of the creating contour not exactly as the reference image shows. You can skip some detailed fragments of the boundary and set the point further apart.

You can read more about creating Linear Extrude object here. After you finish drawing the contour ( you will be asked whether to close it ) set the height of created object so that they look similar to those on screens below. Name the object as "Land1" (double click on the object in Scene object list). You've got first land object ready. Next draw another two lands in the same way using the same reference image. Remember to keep the same Zoom parameter for the reference image drawing another lands to avoid correcting their size by scaling.

Once you have all of three land objects done set the proper color to each of them as it is in the reference image. Expand Surface container and color picker at Fill color parameter. To make sure the applied color is the same as in reference image change for a while the lightnig model from Dynamic lighting to Lighting disabled. Once you apply appropriate fill color return to Dynamic lighting. Check the Specular checkbox, it gives nice effects of shinning while camera is moving around it.

In the top view you can see all the objects in white because the light which is not set yet. Add Directional light to the scene and rotate it a bit to see colors for the objects in the top view similar to applied.

This is what you see when the light is set by default:

After adding and directing own light:

As you can see two of these objects are not displayed correctly. It depends on direction of creating the contour. Select these objects and invert their face orientation - click Invert normals button. In further stage you could noticed some other display errors caused by inappropriate type of faces sorting algorithm. The problem will dissapear when GPU will take care of face sorting which provide new flash player with Molehill (GPU-accelerated 3D API). For now change Faces sort parameter to Near-z. It works better the objects we have built.

We will try to maintain a constant width of the gap between objects. Click on the Top view to make it active  and switch 4 views to one window mode ( W  key ). Select one of objects and manipulate the view of contour editor so that you can see the same area of objects both in main view and contour editor. Then move particular vertices to refine the shape of the gap. It may be convenient to turn on a line displaying for each object for the duration of the operation. The picture below shows the comparison before and after corrections.

User interaction - event handling for the 1st level map

First off we focus on 1st level map which is map of the country. Add a Target camera ( Alt + 2 )to the scene and position it so that it looks from the top at the country that consist of 3 land objects. When you position the main camera and shine of the surface seems to be too strong change a direction of light rays by rotating Directional light. This type of light might be placed anywhere over the scene. It only determines direction of the light and is not a light source. Move the light from objects so as not to obscure the view.  If you are not happy with the surface color of particular objects you can tweak them any time.

Next we will add events handling. We want each land changing its color after mouse moves over it. Select one of the land object and go to Events container. Set Mouse Over event fo Move. Now you need to set amount of object offset when mouse move over it. Let the object responses by moving along Z axis by 0.7. Amount of offset might vary depending on scale of the objects that you have in the scene.

Apply Move Over event to other two land objects with the same parameters. Make a preview to test if everything is fine ( press F5). Each land should move a bit above the common surface of the country. 

You've got a first level of the map done. Next you have to create region objects. Each land has few of them. Again you can either draw them using Linear extrude objects or import ready objects using Geometry->Import geometry.

Geometry creation for the second level of the map

Before you start drawing regions make a group from all 3 lands and name it "Country". In order to do that select all 3 land objects by clicking on them and holding SHIFT key. You can also select them clicking on Scene object list. Make a group from selected objects usuing appropriate icon or pressing CTRL+G.

Move the group a bit to the left for the time of adding new objects. They are going to be elements of the second level of the map. Start drawing regions of the firts land one by one like you did the land objects. Create 5 region objects of the first land using Linear Extrude objects. Give them names as follow : "Region1", "Region2",......"Region5" and set fill color to each close to Land1 object color but a little bit different to each other. You can also refine the shape of the gap beetwen two adjacent regions alike you did in first level map.

 Make the group from them and name new group as "Land1". Move it a bit aside to make a space for creation of another objects. Make another 2 groups of regions alike and name them using the same convention. Finally your Scene objects list should look like on the picture below: 

After you have finished drawing/importing all regions of the land you will need to deploy them in the scene so that you can easy position cameras looking at separate land. As i mentioned before after clicking on the land the view will move to his equivalent divided by regions. You will use Photo target cameras do achieve this. You can read more about using Photo target cameras in this part of Esquimo manual.

Now, you will add 3 Photo target cameras to the scene ( go to Cameras tab - Alt + 2 ). Name them accordingly : Photo target 1, Photo target 2, Photo target 3. Position each of them so that they look at separate land objects. You can each Photo target view switching acitve view to Camera view ( Alt + C ) and selecting appropriate camera by clicking right mouse button on camera icon.

The region objects and corresponding Photo cameras should be deployed more or less as on the pictures below. There are yellow lines in those to give you better idea on their location in 3d space.

Here are the views from particular Photo target cameras:

In odrer to smoothly move a view in playing scene from main camera to any Photo target after clicking on the one of the land of the country you need to apply Mouse click event to those land objects and select proper Photo target from the list.

Set Mouse click event for 2 remaining lands. Now after clicking on any land object the view should change position from the main camera to the Photo target camera facing to the corresponding object.  This is what you should get at this stage:

Now we are going to add a tittle ineraction at the second level of the map. Let each region of the land change a color to yellow when mouse over it. In order to do that we need to activate Mouse Over event for each region object and set it to Fill. In event properites changge the color value to #FFCC00 ( warm yellow )

Now we are going to add a tittle ineraction at the second level of the map. Let each region of the land change a color to yellow when mouse over it. In order to do that we need to activate Mouse Over event for each region object and set it to Fill. In event properites changge the color value to #FFCC00 ( warm yellow ). Before you apply the Mouse Over event to other regions let's set Mouse Click event. You can set it so the clicked region cause jump to a given URL path (Navigate to URL), but in this tutorial we are going to use it for returning to the main map. Select Photo target again and set to Camera:main in Properties.

Apply both event handlers ( Mouse click and Mouse over ) to all other region objects with the same parameters and map is done. Using API that Esquimo is equipped with you can expand Events model to integrate the map with other elements on the page at deeper level. Read more about Esquimo API.