3D Model Component
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
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.
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
|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 carousel that will be well positioned 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.|
|Adjust the angle of rotation for the object around the three dimensions. Scale -180 to 180|
|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.
|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||Dropdown 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.
|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 (ie. left-to-right).|
|Angle Measurement||3 panels show the degree of angle set for Lower, Middle and Upper rotation.|