Autodesk Forge Viewer 和 React 组件 [英] Autodesk Forge Viewer and React components

问题描述

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

这是我目前唯一丢失的物品.我已经从桶中提取了模型，将其转换为 svf 并提取了一个要传递给查看器的骨灰盒.有什么帮助吗，可能不使用 redux?

解决方案

您可以创建一个组件和一个助手:

助手:viewer-helper.js

从 'axios' 导入 axios/* 全球 Autodesk，三个 */const url_base = 'http://localhost:4000/'//从服务器获取令牌const getToken = async() =>{const {data} = await axios.get(url_base + 'forge/auth');返回数据}export const initializeViewer = async (urn) =>{const 令牌 = 等待 getToken()const 查看器选项 = {env: 'AutodeskProduction',访问令牌:令牌，api: 'derivativeV2',};var viewerContainer = document.getElementById('viewerContainer')var 查看器 = 新 Autodesk.Viewing.Private.GuiViewer3D(viewerContainer, {})Autodesk.Viewing.Initializer(viewerOptions, () => {查看器开始()；Autodesk.Viewing.Document.load(`urn:${urn}`, (doc) =>{var defaultModel = doc.getRoot().getDefaultGeometry();viewer.loadDocumentNode(doc, defaultModel);})})}

组件:

import React,{useEffect} from 'react'从 './viewer-helper' 导入 {initializeViewer}const 查看器 = () =>{const urn = 'dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6bWFsbGF2ZW50dXJhc2FuanVhbmRlbHVyaWdhbmNob19idWNrZXQvMTU3OTUyNjAwMzkwsJlbyVKxKwsJlBYVMZKWxJlByVmXHvxEkwxMxE1WXJHJV1V1useEffect(() => {初始化查看器(骨灰盒)}, [])返回 (<div><div id='viewerContainer'></div>

)}导出默认查看器

App.js

从'react'导入React；导入'./App.css';从'./components/viewer/Viewer'导入查看器功能应用(){返回 (<div className="应用程序"><查看器/>

);}导出默认应用程序；

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?

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

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);
    })
  })
}

Component:

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屋！