Sharepoint中的Autodesk Forge Viewer仅显示黑色模型
P粉265724930
P粉265724930 2023-09-02 20:17:59
0
1
428

对于我们当前的项目,我们按照这个教程将Forge Viewer集成到Sharepoint中。(https://aps.autodesk.com/blog/sharepoint-online-integration)

然后我们使用这个npm包在React中设置了项目。 https://www.npmjs.com/package/react-forge-viewer。

将项目迁移到React后,查看器失去了所有颜色,变成了黑色。

根据错误消息,加载查看器时属性仍然未定义。 在仅使用SPFX时没有出现此问题,只有在使用React后才出现。

非常感谢您的帮助!

错误消息

无颜色的查看器

P粉265724930
P粉265724930

全部回复 (1)
P粉884548619

看起来(由社区开发的)react-forge-viewer项目在过去的3年里没有更新。为了排除该项目中的任何问题,我建议您用自己的简单的React包装器替换它。类似以下内容:

  • 将查看器依赖项添加到您的HTML中:
  • 创建一个简单的React包装器,暂时将访问令牌和模型URN硬编码:
// Viewer.js import React from 'react'; import './Viewer.css'; const Autodesk = window.Autodesk; const ACCESS_TOKEN = '...'; const URN = '...'; async function initializeViewer(container) { return new Promise(function (resolve, reject) { Autodesk.Viewing.Initializer({ accessToken: ACCESS_TOKEN }, function () { const viewer = new Autodesk.Viewing.GuiViewer3D(container); viewer.start(); resolve(viewer); }); }); } async function loadModel(viewer, urn) { return new Promise(function (resolve, reject) { function onDocumentLoadSuccess(doc) { resolve(viewer.loadDocumentNode(doc, doc.getRoot().getDefaultGeometry())); } function onDocumentLoadFailure(code, message, errors) { reject({ code, message, errors }); } Autodesk.Viewing.Document.load('urn:' + urn, onDocumentLoadSuccess, onDocumentLoadFailure); }); } class Viewer extends React.Component { constructor(props) { super(props); this.ref = React.createRef(); this.viewer = null; } componentDidMount() { if (!this.viewer) { this.viewer = initializeViewer(this.ref.current); this.viewer.then(viewer => loadModel(viewer, URN)); } } render() { return ( 
); } } export { Viewer };
/* Viewer.css */ .viewer { position: relative; width: 800px; height: 600px; }
  • 最后,将组件插入到您的应用程序中。

如果即使使用这个简单的React组件问题仍然存在,请尝试在独立的React应用程序中使用该组件,以排除Sharepoint环境引入的任何潜在问题。

    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责声明 Sitemap
    PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!