Chrome / Edge

    # Tutorial

    # Crane

    # Explanation

    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.

    Mode Explanation
    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.

    # Process

    # Load Crane

    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’.

    # Loading the Viewer

    To load the Viewer, create an Instance of the ‘Loader’ by using Javascript ‘new’ operator. The constructor factor contains the id and options object of the DOM element that wraps the Editor. The options object contains the required settings, such as the SDK mode.

    # Hello World

    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.

    # Trying it yourself

    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.

    # Load object

    ‘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

    Flipping objects upside down can be done by using flipHorizontal, flipVertical method. 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.

    # Change Wallpaper Style

    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.

    # Change Flooring Style

    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.

    # Changing Wall Opacity

    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.

    top button