3D Model

This component is for advanced users. It will display a 3D model of your choice.

You can choose “.obj” (wavefront object format) or a “.um” and “.uma” (Umajin format files from our model converter). There are properties to make the model angle, tilt and zoom.

The three dimensions are mapped to the screen as X left-to-right, Y up-and-down, and Z as depth into the screen.

If you want your model to animate you need to create “.uma” files which hold both the model and the animation.

Creating your model from scratch

If you’re creating the model from scratch:

  • Consider limiting the number of polygons. Detailed models will struggle on low-end phones or
  • Test your models on representative samples of your target devices to make sure they perform
  • Texture maps should be added in 3D software such as Autodesk Maya or 3DS Max
  • Make sure the pivot point is center

Importing your Model

The model must be converted from formats such as OBJ or FBX. If you need to use a 3D Model, please contact Umajin support for our Model Converter Application.

Setting up your model display

We recommend starting with Interaction mode = Rotate. Then adjust your large scale until you can see the whole object.
Next adjust the fine scale to the size you want to fill the area appropriately. In conjunction with this you may need to adjust the X/Y/Z origin to center the object.

Once these basics are correct, you can then adjust the X/Y/Z angles to an appropriate starting position, and then set the velocity or interaction mode to rotate.

Setting up your model display

Here are some sample static 3D models, an animated 3D model model_3d.zip and a link to a pano (panorama) background pano1.jpg.

3D Model example

3D Models are accessed from the 3D Model component or from the RenderKit component. Examples of using 3D content is shown in the video below.

3D Model tutorial

Properties for 3D Model Component


When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name.

Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel.

Position and Size

Sets position and size.

As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations.

You can use millimeters to control aspects of size like width or height in order to create a model thats size will be maintained across devices.


Sets the values for the object to be viewed.

FilenameBrowse folder to select the .UM file that will be displayed.
Scale LargeThe rough scale of the model; adjust until you can see the model.
Scale FineThe fine scale of the model, allowing control of just how large it appears.
Angle X
Angle Y
Angle Z
Adjust the angle of rotation for the object around the three dimensions. Scale -180 to 180
Origin X
Origin Y
Origin Z
The origin point around which the object rotates, with 0,0,0 being the center.
OpacityHow opaque or transparent the model is.
FoVHow wide the Field of View (FoV) is for viewing the model, from 15 to 90 degrees.
Near Clip

Slider 0 to 50 . ‘Near’ should be smaller than the smallest piece of your 3D model and ‘Far’ should be bigger than the largest dimension.

(By default we use 0.1 to 100 – you are setting the closest point the camera can see to the furthest it can see)

Far ClipSlider 0 to 500
Panorama FilenameOpen folder to select filename of panorama image.
Floor ColorColor picker to select color of base plane.
OpacitySlider for opacity of Floor color
EffectHow the model will be displayed. Dropdown menu.

  • None: No light and shade effect. If the model has lighting built-in then this can be suitable.
  • Basic lighting: Simple light and shade is applied.
  • Complex Lighting: Uses diffuse, bumpmap and specular map.
  • Mechanical: For CAD drawings – shows up edges.
  • Normal: a debugging mode which shows you if you have a model with correctly encoded normal.
Effect SlidersEffects 1,2,3,4 can be scaled from 0 to 1, with 0 being the least.
InteractionHow the user can interact with the model
Start AnimationDrop down to select start animation. Choose from the”.uma” files. You can select from multiple animations you have created for the same model.
Start LoopCheckbox to activate looping the animation.
Press AnimationDropdown to select animation that will trigger when the component is pressed. Choose from the”.uma” files. You can select from multiple animations you have created for the same model.
Press LoopCheckbox to activate looping the press animation.
ModeHow the user can interact with the model.

  • None: the user cannot manipulate the model. However, if a Velocity is given (below) then the model will rotate at that fixed rate.
  • Rotate: the user can rotate the model by touch.
  • Look out: the user is placed at the origin and can rotate the object around them; useful for scenes where the user looks at the inside of the model.
  • Rotate & Zoom: the user can rotate the model by touch and zoom it.
X Velocity
Y Velocity
Z Velocity

How fast the object rotates, if the interaction Mode is set to none.

Slider adjusts speed from -1 to +1.

X AngleWhen the interaction mode is set to Rotate, this 3-part slider controls how much the user can rotate the model around the X-axis, i.e. how much they rotate the model onto its top or bottom.This is useful to constrain the model to a useful or desirable range of views.Note that the user can always rotate 360 degrees around the Y (i.e. left-to-right).
Angle Measurement3 panels show the degree of angle set for Lower, Middle and Upper rotation.

Events that can Trigger an Action on the 3D Model Component

On PressAction occurs when component is pressed
On CompletionAction occurs when the Model has completed its movement cycle.