How to view a local stored SVF files using the Forge Viewer?

问题

I'm currently working on a project where I want to display a locally stored SVF-File in the browser using the Forge Viewer. I have already tried different approaches but none of them seem to work and I run into different exceptions every time.

Here is how I try to do it using React and Typescript.

This is the App.tsx where I load the Viewer Component:

<div className="col-sm-8 fill">
    <ForgeViewer />
 </div>

This is my Viewer Component:

import React from 'react';
import {useEffect} from 'react'
import {initializeViewer} from './viewer-helper';

const ForgeViewer: React.FC = () => {

  useEffect(() => {
    initializeViewer()
  }, [])

  return (
    <div>
      <div id="forgeviewer"></div>
    </div>
  );

}

export default ForgeViewer

And this is the helper that I wrote for my Viewer Component:

const options : Autodesk.Viewing.InitializerOptions = {
    doc: './models/small-revit-sample-house/Resource/3D_View/_3D_/_3D_.svf',
    env: "Local",
}

export const initializeViewer = () => {
    let container: HTMLElement | null;
    let viewer: Autodesk.Viewing.GuiViewer3D;
    container = document.getElementById('forgeviewer');
    
    if(container !== null){
      viewer = new Autodesk.Viewing.GuiViewer3D(container);
    }

    Autodesk.Viewing.Initializer(options, function () {
        //viewer.loadDocumentNode(options.doc, "/public/manifest.json");
        //viewer.loadModel(options.doc, onDocumentLoadSuccess, onDocumentLoadFailure);
        //Autodesk.Viewing.Document.load(modelURL, onDocumentLoadSuccess, onDocumentLoadFailure);
        viewer.start(options.doc);
        //loadViewer(modelURL);
    });
}

As you can see, I have already tried different approaches but none of them seem to work.

1: Using the viewer.start function I get -> "Error while processing SVF: End of Central Directory Record not found"

2: Using the viewer.loadDocumentNode i get -> "Unhandled Rejection (TypeError): e.getViewableUrn is not a function"

3: Using the viewer.loadModel i get -> "Uncaught (in promise) TypeError: te is undefined" Btw. the function onDocumentLoadSuccess is an empty function that doesnt get called.

I would be really happy if I could just get on of these ways to work and understand more of whats going on. :)

回答1:

You can load SVFs from custom locations using either the start method or the loadModel method:

<!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" type="text/css">
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
        }
        #preview {
            height: 100%;
        }
    </style>
    <title>Autodesk Forge: Local SVF</title>
</head>

<body>
    <div id="preview"></div>
    <script>
        const MODEL_URL = 'https://petrbroz.s3-us-west-1.amazonaws.com/svf-samples/sports-car/0.svf';
        Autodesk.Viewing.Initializer({ env: 'Local' }, async function () {
            const viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('preview'));
            viewer.start(MODEL_URL);
//          viewer.loadModel(MODEL_URL);
        });
    </script>
</body>

</html>

It's possible that the error you're getting is related to the React wrapper instead.

回答2:

I got it to work. Here is how I did it: The models-folder is now located inside the public folder (Bad for secruity but doesnt matter for my project). Than you can load the svf file like this:

Autodesk.Viewing.Initializer(options, function () {

      viewer.start( "./models/path/file.svf");

    });

来源：https://stackoverflow.com/questions/64849209/how-to-view-a-local-stored-svf-files-using-the-forge-viewer

标签

reactjs

typescript

autodesk-forge