How to Show/View or Read .dwg files on browser

Question

How to Show or Read .dwg files on browser without using any software means using PHP, jQuery, Javascript or any other programming language. For this I have gone through https://developer.autodesk.com and created an app with Client ID and Client Secret, Also created index.html file. But after that i get stuck in finding next movement for getting required "Model Derivative API". So Please guide me for the same. Thanks for giving your precious response.

<!-- The Viewer CSS -->
<link rel="stylesheet" href="https://developer.api.autodesk.com/viewingservice/v1/viewers/style.min.css" type="text/css">

<!-- Developer CSS -->
<style>
    body {
        margin: 0;
    }
    #MyViewerDiv {
        width: 100%;
        height: 100%;
        margin: 0;
        background-color: #F0F8FF;
    }
</style>

<!-- The Viewer will be instantiated here -->
<div id="MyViewerDiv"></div>

<!-- The Viewer JS -->
<script src="https://developer.api.autodesk.com/viewingservice/v1/viewers/three.min.js"></script>
<script src="https://developer.api.autodesk.com/viewingservice/v1/viewers/viewer3D.min.js"></script>

<!-- Developer JS -->
<script>
    var viewer;
    var options = {
        env: 'AutodeskProduction',
        accessToken: '<YOUR_APPLICATION_TOKEN>'
    };
    var documentId = 'urn:<YOUR_URN_ID>';
    Autodesk.Viewing.Initializer(options, function onInitialized(){
        Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
    });

    /**
    * Autodesk.Viewing.Document.load() success callback.
    * Proceeds with model initialization.
    */
    function onDocumentLoadSuccess(doc) {

        // A document contains references to 3D and 2D viewables.
        var viewables = Autodesk.Viewing.Document.getSubItemsWithProperties(doc.getRootItem(), {'type':'geometry'}, true);
        if (viewables.length === 0) {
            console.error('Document contains no viewables.');
            return;
        }

        // Choose any of the avialble viewables
        var initialViewable = viewables[0];
        var svfUrl = doc.getViewablePath(initialViewable);
        var modelOptions = {
            sharedPropertyDbPath: doc.getPropertyDbPath()
        };

        var viewerDiv = document.getElementById('MyViewerDiv');
        viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerDiv);
        viewer.start(svfUrl, modelOptions, onLoadModelSuccess, onLoadModelError);
    }

    /**
     * Autodesk.Viewing.Document.load() failuire callback.
     */
    function onDocumentLoadFailure(viewerErrorCode) {
        console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
    }

    /**
     * viewer.loadModel() success callback.
     * Invoked after the model's SVF has been initially loaded.
     * It may trigger before any geometry has been downloaded and displayed on-screen.
     */
    function onLoadModelSuccess(model) {
        console.log('onLoadModelSuccess()!');
        console.log('Validate model loaded: ' + (viewer.model === model));
        console.log(model);
    }

    /**
     * viewer.loadModel() failure callback.
     * Invoked when there's an error fetching the SVF file.
     */
    function onLoadModelError(viewerErrorCode) {
        console.error('onLoadModelError() - errorCode:' + viewerErrorCode);
    }

</script>

Answer 1

You can easily test it online at A360 Viewer.

The code you pointed out is just the page, note how it's missing the TOKEN and the URN. In fact, following the Viewer tutorial you'll notice a Prepare your file for viewing tutorial.

In any case you'll need a back-end that upload and post translation jobs, we have some samples at our github account.

Update

Show models without programming: you can easily share your A360 models on your website, here are the steps:

1. Go to A360 and sign in (or sign up)
2. Use an existing project or create a new one.
3. Inside the project, click on Upload and select the file on your machine. The translation process will start automatically. Or you can use existing files on your project.
4. On the top-right icon, click on "Share" option.
5. On the popup, go to Embed tab and then select the size. Copy the HTML and paste on your website.