How to properly show .dwg file in Reactjs web application

Question

Currently, I want to render a large .dwg file in the reactjs web application, the .dwg file will be retrieved from my django server. Also, I will be doing some filtering onto the .dwg file to show the coordinate of different IoT devices.

After hours of research, I found out there are two ways of showing .dwg file in the reactjs web application. Either using autodesk forge viewer extension in reactjs, however, there are little tutorials on how to implement that step by step. Another solution is to convert .dwg file to .dxf file and render it in the web.

I want to know which solution is better, and please point me out if I am wrong about the solutions. I mean I really want to do it with the standard practice. Much appreciated.

Answer 1

Python is for the backend, and react.js runs on the front end, so there is nothing special to other Forge Viewer apps. You might put it in the Django view with my limited knowledge of the Django framework.

You just need to wrap the Forge Viewer in a React component, then render and mount it to DOM. In addition, before using Forge Viewer, you need to call Model Derivative API's POST job to translate your DGW to SVF, and then pass the base64 encoded URN to the viewer react component. Here is a Forge Viewer react component for the demo, and a tutorial on using Model Derivative API

https://github.com/yiskang/forge-viewer-react-component-demo/blob/main/src/Viewer.jsx

BTW, for converting the DWG to SVF, here is a difference in the job configuration for DWG, since it's not a zipped file.

curl  -X POST \
      'https://developer.api.autodesk.com/modelderivative/v2/designdata/job' \
      -H 'Content-Type: application/json' \
      -H 'Authorization: Bearer <YOUR_ACCESS_TOKEN>' \
      -H 'x-ads-force: true' \
      -d '{
          "input": {
              "urn": "<BASE64_ENCODED_URN_OF_SOURCE_FILE>",
          },
          "output": {
              "formats": [
                  {
                      "type": "svf",
                      "views": [
                          "2d",
                          "3d"
                      ]
                  }
              ]
          }
      }'