Компоненты Autodesk Forge Viewer и React

Question

Я пытаюсь встроить средство просмотра Forge в компонент React. На GitHub есть пример, но он мне не совсем подходит. Кажется, есть некоторые недостающие элементы. Есть ли способ, которым мы можем получить пошаговую реализацию программы просмотра в React?

Это мой единственный недостающий объект на данный момент. Я уже выбрал модель из ведра, преобразовал ее в svf и извлек урну для передачи зрителю. Любая помощь там, возможно, без использования Redux?

Answer 1

Вы можете создать компонент и помощник:

Помощник: помощник зрителя. js

import axios from 'axios'
/* global Autodesk, THREE */
const url_base = 'http://localhost:4000/'
// Get token from server
const getToken = async () => {
const {data} = await axios.get(url_base + 'forge/auth');
return data
}

export const initializeViewer = async (urn) => {
const token = await getToken()

const viewerOptions = {
    env: 'AutodeskProduction',
    accessToken: token,
    api: 'derivativeV2',
};
var viewerContainer = document.getElementById('viewerContainer')
var viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerContainer, {})

Autodesk.Viewing.Initializer(viewerOptions, () => {
    viewer.start();
    Autodesk.Viewing.Document.load(`urn:${urn}`, (doc) =>{
        var defaultModel = doc.getRoot().getDefaultGeometry();
        viewer.loadDocumentNode(doc, defaultModel);
    })
  })
}

Компонент:

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

const Viewer = () => {
const urn ='dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6bWFsbGF2ZW50dXJhc2FuanVhbmRlbHVyaWdhbmNob19idWNrZXQvMTU3OTUyNjAwMzkwM19NYWxsJTIwQXZlbnR1cmElMjBTSkxfRXN0cnVjdHVyYXMucnZ0'
useEffect(() => {
    initializeViewer(urn)
}, [])

return (
    <div>
        <div id='viewerContainer'></div>
    </div>
)
}

export default Viewer

Приложение. js

import React from 'react';
import './App.css';
import Viewer from './components/viewer/Viewer'

function App() {
  return (
    <div className="App">
      <Viewer/>
    </div>
  );
}

export default App;

Answer 2

Пожалуйста, попробуйте компонент React Forge Viewer: https://www.npmjs.com/package/react-forge-viewer