[英]Autodesk Forge Viewer and React components
我正在嘗試在 React 組件中嵌入 Forge Viewer。 GitHub 上有一個示例,但它對我來說不太適用。 似乎有一些缺失的元素。 有沒有辦法讓我們在 React 中逐步實現查看器?
這是我目前唯一缺少的對象。 我已經從桶中獲取模型,將其轉換為 svf 並獲取要傳遞給查看器的骨灰盒。 有什么幫助,可能不使用 redux?
您可以創建一個組件和一個助手:
助手: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
應用程序.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;
請嘗試 React Forge 查看器組件: https : //www.npmjs.com/package/react-forge-viewer
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.