Autodesk Forge Viewer和React组件 [英] Autodesk Forge Viewer and React components
问题描述
我正在尝试将Forge Viewer嵌入到React组件中. GitHub上有一个示例,但对我来说却不太奏效.似乎有一些缺失的元素. 有没有办法在React中逐步实现查看器的实现?
I am trying to embed a Forge Viewer in a React Component. There is an example on the GitHub but it is not quite working for me. It seems there are some missing elements. Is there a way we can get a step by step implementation of the viewer in React?
这是我目前唯一丢失的物体.我已经从存储桶中获取了模型,将其转换为svf,并获取了一个n以传递给查看器. 是否有任何帮助,可能不需要使用redux?
This is my only missing object at the moment. I have already fetched the model from a bucket, converted it into svf and fetched a urn to be passed to the viewer. Any help out there, possibly without using redux?
推荐答案
您可以创建组件和帮助器:
You can create a component and a helper:
Helper:viewer-helper.js
Helper: 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;
这篇关于Autodesk Forge Viewer和React组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!