Overview

Babel3D Developer Plan enabls you to showcase 3D files on your website with just few lines of code. It allows you to access Babel3D services to upload, translate and view 3D files using Babel3D APIs.


Viewer
  • Babel3D Viewer is a WebGL-based, JavaScript library for 3D model rendering
  • With true plug-and-play simplicity, Babel3D allows developers┬áto view and interact with more than 36 CAD and file formats
  • APIs allow users┬áto connect 3D data to query, manipulate and perform various 3D operations
  • Allows user to customize branding, UI and look-and-feel
  • If you know HTML, you can integrate Babel3D viewer in couple of hours!!!

  • Translate
  • Convert 3D parts and assemblies from 36 formats to 3D PDF, STL, 3DS, OBJ and COLLADA

  • Requirement

    Babel3D supports 36 of the most popular 3D file formats. Upload parts and assembly files from the formats below.

    CAD formats
    SolidWorks (sldprt, sldasm), CATIA V5 (CATPart, CATProduct), Inventor (ipt, iam), Pro/ENGINEER and Creo Parts and Assembly files (prt, asm), NX Parts and assemblies (prt), JT, SolidEdge (par, asm, pwd, psm), RHINO (3dm), Autocad 3D DWG (dwg)

    Graphical formats
    Autodesk 3D Studio (3DS), SketchUp (skp), Wavefront OBJ (obj), VRML (wrl, vrml), CGR, Collada (dae)

    Neutral formats
    STEP (stp, step), IGES (igs, iges), STL

    Other formats
    Parasolid (x_t, x_b, xmt, xmt_txt), 3D PDF (pdf, prc, u3d)

    Babel3D does not support 2D files formats like DWG, DXF and DGN.

    Babel3D WebGL viewer works in all modern browsers across Windows, Mac, Linux, iOS and Android. Official supported browsers are Google Chrome, Firefox, Safari and IE 11.

    Get Started This tutorial takes you through the steps required to integrate Babel3D viewer and load a 3D model in the viewer.

    Step 1 : Getting all ingredients
    Subscribe to Babel3D Developer Plan and get your AppKey. This AppKey is used in every API call to Babel3D.
    To get the AppKey, Login to Babel3D and Subscribe to Developer plan.



    Use the Babel3D APIs as described in API tutorial.
    Use your AppKey in every API call to Babel3D.

    Upload a model using /upload API and get fileId. You can also get all the details of 3D models uploaded from Babel3D Files page from your account. Use /filelist API to get list of files along with theirs fileId.

    Step 2 : Prepare your HTML
    Create a HTML file viewer.html and copy the following content into it. Or copy the <head></head> section into the existing html page to include Babel3D resources.
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
    
            <link href="https://www.babel3d.com/Style/ViewGL/CSS/babel3d.min.css" rel="stylesheet" type="text/css" />
            
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
            <script src="https://www.babel3d.com/Scripts/ViewGL/core.min.js" type="text/javascript"></script>
        </head>
    </html>
    
    

    Step 3 : Load 3D viewer
    Copy the content from <body></body> to load Babel3D viewer
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
    
            <link href="https://www.babel3d.com/Style/ViewGL/CSS/babel3d.min.css" rel="stylesheet" type="text/css" />
            
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
            <script src="https://www.babel3d.com/Scripts/ViewGL/core.min.js" type="text/javascript"></script>
        </head>
    
        <body>
            <!--Babel3D Viewer-->
            <div id="viewer" style="width: 100%; height: 900px; position:relative"></div>
        </body>
    </html>
    
    <script type="text/javascript">
        // Events/Callbacks    
        Babel3D.ControlLoadedEvent = function () {
            console.log("Babel3D viewer loaded");
        }
    </script>
    

    Specify viewer's height and width to to fit the viewer in your html page.
    <div id="viewer" style="width: 100%; height: 900px; position:relative">

    Additionaly, you'll receive a callback event Babel3D.ControlLoadedEvent wherein you can add a custom action, if any, to be executed after the viewer is loaded.

    Step 4 : Show UI controls
    Babel3D provides default Product structure tree and UI toolbar to control standard 3D operations. Copy the following content to show default toolbar.
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
    
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" >
            <link href="https://www.babel3d.com/Style/ViewGL/CSS/babel3d.min.css" rel="stylesheet" type="text/css" />
    
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
            <script src="https://www.babel3d.com/Scripts/ViewGL/core.min.js" type="text/javascript"></script>
        </head>
        <body>
            <!--Babel3D Viewer-->
            <div id="viewer" style="width: 100%; height: 900px; position:relative"></div>
        </body>
    </html>
    
    <script type="text/javascript">
        Settings.showUI = true;
    
        Babel3D.ControlLoadedEvent = function () {
            console.log("Babel3D viewer loaded");
        }
    </script>
    
    You can turn the toolbar on or off by setting the Settings.showUI value to true or false

    Step 5 : Load a 3D model
    Make sure that you are registered to Babel3D Developer Plan and acquired the APPkey. Also you must have uploaded a 3D model and received the fileId to be shown.
    <script type="text/javascript">
        Settings.showUI = true;
        var appKey = <your_app_key>;
        var fileId = <file_id>;
    
        Babel3D.OpenFile(appKey, fileId);
    
        Babel3D.ControlLoadedEvent = function () {
            console.log("Babel3D viewer loaded");
        }
        
        Babel3D.FileLoadedEvent = function () {
            console.log("File loaded");
        }
    
    </script>
    

    Sample 3D viewer
    File ID: