Search code examples
node.jsautodesk-forgeautodesk-model-derivative

How to view local .svf file in Forge Viewer?

I have downloaded the content of .svf file using https://github.com/petrbroz/forge-convert-utils to my local machine. then I am trying to load the .svf file to forge viewer in this way.

const MODEL_URL = './models/model1/output.svf';
Autodesk.Viewing.Initializer({ env: 'Local' }, async function () {
const viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('preview'));
viewer.start(MODEL_URL);
});

async function download() {
        debugger;
        await fetch('/api/download');
    }
download()

The models folder is in the root folder. I am getting a popup msg like this. enter image description here

What is the reason for this? And how can I overcome this? Thanks, in advance.

Solution

  • Note that based on your code snippet, the models folder should be placed in the same folder as the HTML page, for example:

    node_modules/
wwwroot/
    models/
        model1/
            ...
            output.svf
    index.html
server.js

    Here's a simple HTML page that will work with the folder structure above:

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.css">
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
    <style>
        body { margin: 0 }
        #preview { position: absolute; inset: 0; }
    </style>
</head>

<body>
    <div id="preview"></div>
    <script>
        Autodesk.Viewing.Initializer({ env: 'Local' }, function () {
            const viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('preview'));
            viewer.start('./models/model1/output.svf');
        });
    </script>
</body>

</html>