Back to Content

Creating a 3D Configurator - Tutorial

This tutorial shows how to use behaviors and action to create a simple 3d configurator using Coppercube. You will be able to click on buttons to make the 3d camera view a 3d model and change its textures.

Start - create your 3D scene

To start, we need a 3D model which we want to show in the configurator. Import a 3D Model, add a skybox and whatever you want until you like the 3D scene. You can also use the 'Create plane' and 'Create box' commands or the prefabs to create a very simple scene for testing purposes for this tutorial. The scene I am using in this example looks like this, a simple car 3d model with a terrain and sky box:

A scene for this example

Adding a Camera

Once you have set up your scene, to the important parts: First we need a camera so we can change its position once the user clicks on a button. Click on the 'Scene editing' tab and click the camera symbol to create a new camera (Alternatively, use the menu: Edit -> Insert -> Create a Camera).
A dialog like this should appear:

The camera creation dialog

Choose the 'Simple Camera'. This creates a new camera and selects it. Move it somewhere near your 3d model and move the target of the camera into the 3d model. The scene now should look like this:

The newly created camera with the target pointed at the 3d model

Adding 2D Overlays as Buttons

Now, we need some buttons where the user can click at. Select the 'Create 2D overlay item' button (either from the 'Scene editing' tab or use the menu 'edit' -> 'insert' -> 'Create 2D overlay item') and draw 3 buttons. Change the text of the first two to the name of the view position you would like it to be, like 'Front' and 'Rear' in the case of the car in my case. The third button is used to change the texture of the 3d model, set its text for example to 'Change' and set a new texture for the car. All this can be done using the 'Attributes' tab in the properties window when the 2D overlay is selected.

Of course you are free to name the buttons and make them look like however you like. In my example, the 2d overlay buttons look like this:

Added three 2D overlays to use them as buttons

Adding placeholders for the 3d positions

When the user clicks on one of the first two buttons, we want the camera to move to a prespecified position. We could enter the final 3d coordinates manually, but it is much simpler to move a 3d object in the editor to that final position. So we simply create 2 billboards (use the 'Create a Billboard' button on the 'Scene editing' tab or via the menu 'Edit' -> 'Insert' -> 'Create a Billboard') and place them at the 3d position we want the camera to be when the user clicks on the two buttons:

Billboards marking the final 3d positions of the camera

Once you are sure the positions of the billboards are ok, make them invisible using the 'Attributes' tab in the Properties window, since we don't want them to appear in the final scene (simply uncheck the 'Visible' property).
The final step is now to make the camera move to the positions of the billboards when the user clicks on them. Select the first 2D overlay and go to the 'Behaviors' tab in its 'Properties' window. Click the '+' button to add a new behavior and select 'When clicked do something'. The new behavior will be selected and look like this:

Adding a 'on clicked' behavior to the 2D overlay

Select the 'action' row, and click on the '...' button to create a new action which should be triggered when the 2D overlay is clicked. The 'edit' actions dialog will pop up and you can click the '+' button here to add a new action. Select a 'change position of scene node' action. The new action will be selected and look like this:

The newly created 'change position of a scene node' action

Now we only need to specify what should be moved and how. In the 'set position type' value, select 'Set relative to a scene node', since we want to set the position to the position of one of the billboards we created previously. In the 'Change which SceneNode', we need the camera to be selected, of course. Select the '<select>' entry and select the camera scene node in the dialog popping up. In the 'Relative to which scene node', select the billboard you placed to specify the final position of the scene node. And finally, check the 'Move animated' option, so the position of the camera is not changed instantly, but animated to the new position. The action should now look similar to this:

The 'change position of a scene node' action set to move our camera

That's it, basically. If you publish the scene now (use the menu 'Tools' -> 'Test as xxx application'), and you click on the button, your camera should move to the position of the billboard. Nice!

To make this work with the second button as well, simply repeat the steps above and give it a 'on clicked' behavior with a 'change position of a scene node' action as with the first 2D overlay. Of course you can add as many 2d overlays with similar behaviors if you like to add more positions to view your 3d model from.

Making the third button change the texture of the 3d model

When clicking on the third button, we don't want to move the camera but change the texture of the 3d model instead. If you noticed how to add a behavior and an action to the 2D overlays before, this is really easy. Do the following steps for the third button:

That's it, now you can create 3d configurators easily.