Back to Content

Creating a 3D Model Viewer - Tutorial

This tutorial shows how to create a simple 3D Model viewer application using Coppercube, making it possible to view a 3D model from all sides, controlled with the mouse. The final application might look like this:

The final application

Start - create your 3D scene

To start, we need a 3D scene we want to view in the model viewer. Import a 3D Model you want to view in your application, add a skybox, lights and whatever you want until you like the 3D scene. In this example, I've used a 3D model of a building and added a skybox and some trees and person billboards:

A scene for this example

Define the camera controller

Once you have set up your scene, to the important part: We want a camera controller which can move around the building in the middle of the scene and show the building from all sides. For this, simply create a new camera: 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

Select 'Model Viewer Camera' and click 'OK'.
A new camera should now have been created, and when it is selected, the outlines of a yellow sphere is drawn around it:

The newly created camera

This new camera will orbit around a center, the 'camera target'. It is marked as a gray square, connected to the camera with a gray line. You can select the target point and move it:

How to move the camera target

In the case of the building scene in this example, the camera target should be placed into the middle of the building, so that the camera moves around this building.
When moving the target, you might notice that the camera itself will follow the target with a constant distance. This is because the camera always has a constant distance to the center, the radius, idicated by the yellow circle. To change the radius, simply select the camera, and go to the 'Behavior' tab in the properties window, and select the 'Model viewer camera style controlled' behavior:

Editing the Model Viewer behavior

Adjust the radius value so that the yellow sphere outline goes around the whole 3D scene:

The radius made big enough to let the camera orbit around the whole scene

And that's it. If you now test the application (menu: Tools -> Test as Windows .exe or Flash .swf) you should now be able to orbit around your 3D scene using the mouse. If you have more than one camera in the scene, ensure that the camera with the model viewer behavior has the setting 'active' enabled in the attributes tab of the property window.