Urbanbase Core is a Unity-based viewer that provides 3D rendering and HomeDesign functionality. Crane is an SDK that allows you to use Core’s features in a web-based platform. By using Crane, you can use the HomeDesign feature to place interior items and characters on 3D models in addition to the default viewer functionality on the web. Crane supports 4 different modes (Product Viewer, Viewer, Editor, Floor Planner) according to different use cases.
|Viewer||You can see 3D objects.|
|Product Viewer||You can see 3D products.|
|Editor||You can load 3D structure and place 3D products.|
|Floor Planner||You can convert the floorplan drawn directly on 2D to a 3D object for viewing.|
The easiest way to use Crane is to use the CDN provided by Urbanbase. The code below launches the Viewer, which allows you to view several 3D models.
In order to load Crane, insert the ‘script’ tag as shown in the following example below.
When ‘script’ is all loaded, a ‘Crane’ object is added to the browser’s global object (‘window’). This object is the object literal namespace of Crane. Therefore, Class such as ‘Loader’ and ‘Structure’ for using Crane is called through ‘Crane’ objects such as ‘Crane.Loader’ and ‘Crane.Structure’.
When the ‘Loader’ constructor function is executed, the Editor is loaded into the DOM element received as an argument. The generated renderer Instance acts as the interface of the loaded editor.
Will load and manipulate the object in the editor loaded from above.
When the Editor is loaded, you can use the ‘Structure’ Class to navigate and manipulate the building.
‘Structure’ Class is accessed through the ‘Crane’ namespace, just like the ‘Loader’ Class. You can create a ‘structure’ object as follows.
The first factor of the ‘Structure’ constructor function is a ‘renderer’ object. The ‘renderer’ is called after the ‘Structure’ method is called, and finally renders the Editor.
Once a ‘Structure’ Instance is created, you can load the structure by calling the ‘set’ method. All the objects in Urbanbase have a unique id. When id is called by passing it as a factor to the set method, you can see that the corresponding structure has been loaded into the Editor. The object loaded in the Editor can be rotated, zoomed in or out by default, by using mouse drag and wheel movements. When the object is loaded, the structure object raises the ‘loaded’ event. The according event handler function can be registered through the ‘on’ method.
Users can define the features that are loaded into the event handler and what features they want to do with them.
The name of each event is specified in detail in the API REFERENCE page.
Flipping objects upside down can be done by using
First, create a basic button to receive the click event and assign each ID.
Next, get the DOM element for each button and use the ‘addEventListener’ method to add ‘flipHorizontal’ and ‘flipVertical’ by using the ‘click’ event.
Click the button to confirm that the object is reversed. If you flip objects, ‘flip’ events will be generated as well as loading.
Users can change the wallpaper of the object using the ‘changeStyleOfWall’ method. ‘material ID’ is used for the ‘changeStyleOfWall’ parameter.
By clicking the apply wallpaper style button, a paint icon is created next to the mouse pointer. In that state, hovering the mouse over the wallpaper sets the range of the corresponding wall and the corresponding ‘material ID’ wallpaper will be applied when you click the mouse.
Just like wallpaper, users can change the flooring of the object using the ‘changeStyleOfFloor’ method. ‘material ID’ is used for ‘changeStyleOfFloor’ parameter and it works in the same interaction as the wallpaper.
Users can adjust the opacity of the wall by using the ‘setWallOpacity’ method. ‘setWallOpacity’ parameter contains ‘opacity’ in the range ‘0~1’. ‘0’ indicates that the wall is completely transparent, ‘1’ indicates that the wall is completely opaque.