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
tablets.
Test your models on representative samples of your target devices to make sure they perform
acceptably.
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

3D Model tutorial

Properties for 3D Model Component

Name

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.

Appearance

Sets the values for the object to be viewed.

Filename	Browse folder to select the .UM file that will be displayed.
Scale Large	The rough scale of the model; adjust until you can see the model.
Scale Fine	The 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.
Opacity	How opaque or transparent the model is.
FoV	How 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 Clip	Slider 0 to 500
Panorama Filename	Open folder to select filename of panorama image.
Floor Color	Color picker to select color of base plane.
Opacity	Slider for opacity of Floor color
Effect	How 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 Sliders	Effects 1,2,3,4 can be scaled from 0 to 1, with 0 being the least.
Interaction	How the user can interact with the model
Start Animation	Drop down to select start animation. Choose from the”.uma” files. You can select from multiple animations you have created for the same model.
Start Loop	Checkbox to activate looping the animation.
Press Animation	Dropdown 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 Loop	Checkbox to activate looping the press animation.
Mode	How 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 Angle	When 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 Measurement	3 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 Press	Action occurs when component is pressed
On Completion	Action occurs when the Model has completed its movement cycle.