Autodesk Forge Viewer 和 React 组件

Posted 2023-03-16

【中文标题】Autodesk Forge Viewer 和 React 组件

【英文标题】：Autodesk Forge Viewer and React components

【发布时间】：2020-05-15 23:21:34

【问题描述】：

我正在尝试在 React 组件中嵌入 Forge 查看器。 GitHub 上有一个示例，但对我来说不太适用。似乎缺少一些元素。 有没有办法让我们在 React 中逐步实现查看器？

这是我目前唯一丢失的物品。我已经从存储桶中获取模型，将其转换为 svf 并获取要传递给查看器的 urn。 那里有任何帮助，可能不使用 redux？

【问题讨论】：

你到底错过了什么？观众应该在反应范围内过得很愉快

Github 上提供的示例并不是很有用，因为它们是基于 redux 的使用（我没有使用），简单的代码副本对我不起作用。跨度>

【参考方案1】：

你可以创建一个组件和一个助手：

助手：viewer-helper.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

App.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;

【参考方案2】：

请尝试 React Forge 查看器组件： https://www.npmjs.com/package/react-forge-viewer