首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Forge Viewer中覆盖ModelStructurePanel以首先显示可用模型列表(但不加载它们,直到我单击它们中的任何一个)

Forge Viewer 是 Autodesk 提供的一款用于查看和交互设计模型的 Web 应用程序。ModelStructurePanel 是 Forge Viewer 中的一个组件,用于显示模型的结构树,允许用户浏览和选择模型的不同部分。

要覆盖 ModelStructurePanel 以首先显示可用模型列表,但不加载它们,直到用户单击它们中的任何一个,你可以按照以下步骤进行:

基础概念

  1. Forge Viewer: Autodesk 提供的用于查看和交互设计模型的 Web 应用程序。
  2. ModelStructurePanel: Forge Viewer 中的一个组件,显示模型的结构树。
  3. 自定义面板: 通过覆盖或扩展 Forge Viewer 的现有组件来创建自定义的用户界面。

相关优势

  • 用户体验: 用户可以快速浏览可用模型而不必加载它们,从而提高性能和响应速度。
  • 资源优化: 只有在用户选择模型时才加载模型数据,节省带宽和处理资源。

类型与应用场景

  • 类型: 自定义面板覆盖。
  • 应用场景: 大型模型库,需要在用户交互前减少初始加载时间。

实现步骤

以下是一个基本的实现示例,展示了如何覆盖 ModelStructurePanel 并实现所需功能:

代码语言:txt
复制
// 初始化 Forge Viewer
let viewer;
function initializeViewer() {
    const options = {
        env: 'AutodeskProduction',
        getAccessToken: function(onTokenReady) {
            // 获取访问令牌的逻辑
            const token = 'YOUR_ACCESS_TOKEN';
            const timeInSeconds = 3600; // 令牌有效期
            onTokenReady(token, timeInSeconds);
        }
    };
    Autodesk.Viewing.Initializer(options, function() {
        viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'));
        viewer.start();
        // 加载模型
        const documentId = 'urn:YOUR_URN';
        Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
    });
}

function onDocumentLoadSuccess(doc) {
    const viewables = doc.getRoot().getDefaultGeometry();
    viewer.loadDocumentNode(doc, viewables).then(() => {
        // 覆盖 ModelStructurePanel
        const modelStructurePanel = viewer.getExtension('Autodesk.ModelStructure');
        if (modelStructurePanel) {
            modelStructurePanel.setVisible(false); // 隐藏默认的结构面板
        }
        // 创建自定义面板
        const customPanel = document.createElement('div');
        customPanel.id = 'customModelList';
        customPanel.innerHTML = '<ul id="modelList"></ul>';
        document.getElementById('forgeViewer').appendChild(customPanel);

        // 填充模型列表
        const modelList = doc.getRoot().search({ type: 'geometry', role: '3d' });
        const ul = document.getElementById('modelList');
        modelList.forEach(model => {
            const li = document.createElement('li');
            li.textContent = model.name;
            li.onclick = () => loadModel(model);
            ul.appendChild(li);
        });
    });
}

function onDocumentLoadFailure(viewerErrorCode) {
    console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
}

function loadModel(model) {
    // 加载模型的逻辑
    viewer.loadModel(model, { skipHiddenFragments: true });
}

initializeViewer();

可能遇到的问题及解决方法

  1. 访问令牌问题: 确保你的访问令牌是有效的,并且具有加载模型的权限。
  2. 模型加载失败: 检查 URN 是否正确,以及模型是否在指定的环境中可用。
  3. 自定义面板显示问题: 确保自定义面板的样式和位置正确设置,以便用户可以看到并与其交互。

解决方法

  • 调试: 使用浏览器的开发者工具检查控制台日志,查找错误信息。
  • 网络请求: 检查网络请求是否成功,确保所有资源都已正确加载。
  • 样式调整: 调整自定义面板的 CSS 样式,确保其在页面上正确显示。

通过以上步骤,你可以覆盖 ModelStructurePanel 并实现一个自定义的模型列表,从而优化用户体验和资源使用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Android绘制优化(二)布局优化

Hierarchy Viewer中有4个四个子窗口,它们的的作用为: Windows:当前设备所有界面列表。...Tree View:将当前Activity的所有View的层次按照高层到低层从左到右显示出来。 Tree Overview:全局概览,以缩略的形式显示。...Layout View:整体布局图,以手机屏幕上真实的位置呈现出来。单击某一个控件,会在Tree Overview窗口中显示出对应的控件。...当然Hierarchy Viewer还可以查看某一个View的耗时,我们可以选择某一个View,然后单击下图红色箭头标识的按钮,这里我们把他简称为Layout Time按钮。 ?...可以使用注释1和注释2处的代码来将ViewStub引用的布局加载到ViewStub中,这样引用的布局就显示了出来。

1.2K80

ARKit 的配置-在您的AR项目的幕后

AR场景视图 ARKit模板已经放入对象库中可用的ARSCNView视图类中。此视图反映了相机看到的内容并将其显示在屏幕上。...相机使用权限 用户反馈 作为开发人员,我们一直需要获得反馈,以帮助我们弄清楚发生了什么和出了什么问题。 统计 在viewDidLoad中,这行代码允许在屏幕上显示统计信息。运行该应用程序以检查它。...统计信息提供有关场景渲染性能的信息,如每秒帧数(fps),动画,物理等.Apple建议将fps设置为60.在您的设备上,您可以单击+按钮展开统计栏更多细节。...显示统计 调试选项 对于ARKit,有两个可用的调试选项可供我们在场景中进行参考。添加它们以在屏幕上看到它。调试选项是一个数组或列表,因此您需要使用方括号。现在运行应用程序。...因此,如果您有一个统一的白色或黑色表,您将看不到太多或任何特征点。这应该可以指示平面是否适合放置模型。所以,我建议你添加垫子或其他东西。 ?

2.5K20
  • 【GEE】1、Google 地球引擎简介

    搜索栏 这是 GEE 用户可用的无数数据集的便捷快捷方式。搜索城市名称(“地点”)是放大到所需地理位置的便捷方式。 左面板 脚本 在此选项卡中,您保存的任何脚本都将列在“所有者”下。...单击脚本的名称将在脚本编辑器窗格中打开其内容。值得庆幸的是,如果在打开新脚本之前有任何未保存的更改,GEE 会提供警告。 文档 在此选项卡中,您将看到编写脚本时要使用的可用函数的分类列表。...单击函数名称会显示其定义和要求。在脚本编辑器中,如果您只能记住部分函数名称,则可以通过按 ctrl-space(Mac 上为 cmd-space)调出建议列表来避免查找它。...3.3.2定义可视化参数 现在我们知道了我们乐队的名称,我们将把我们的图像添加到我们的地图查看器中。真彩色图像可用于区分土地覆盖类型或景观上的物理对象。...这是一个有用的功能,可以帮助您养成使用 GEE 的习惯,默认是处理地图查看器窗格的范围。您的范围越大,加载输出所需的时间就越长! 注意:单击名称可以重新命名几何特征。

    66330

    OpenCV3 和 Qt5 计算机视觉:1~5

    使用第一个列表和第二个列表单击任何项​​目类型后(在下面的屏幕截图中),它们的描述将出现在第三个窗格中。...项目视图(基于模型):这基于模型视图控制器(MVC)设计模式; 它们可用于表示不同类型容器中的模型数据。...备忘 这可用于保存和(以后)加载对象的状态。 这种设计模式等同于编写一个能够存储 Qt 对象的所有属性并还原它们以创建新属性的类。...兼容),已添加到我们窗口的列表小部件中,然后被卸载。...您应该能够在列表中看到单个插件,将其选中,单击帮助按钮以获取有关它的信息,然后单击过滤器按钮以将插件中的过滤器应用于图像。

    6K20

    教你快速安装OpenShift容器平台3.6

    自OpenShift容器平台(OCP)发布以来,我一直希望提供一个简单、完整且易用的安装教程。...如果您一直关注着我的文章的进度,很明显能够感受到我非常热衷于OpenShift等基于云的解决方案。当吧应用程序从本地资源转移到远程资源后,开发人员仍然可以用同样的方式继续在本地工作。...另外,注意显示命令行最后显示的那条命令,你能通过这使用这个命令来清除你的上述操作。 我的已经更新了Image Stream,这本来需要一段时间才能将它们导入OCP并显示在可用平台列表中。...使用管理员(admin)用户登录,并通过单击“新建项目”来创建项目。 用你喜欢的方式填写图4所示的表单,我选择把它排成一个项目,以便在红帽云演示项目里得到更多好处。...一旦提交了表单,产品模板的概览就会出现在我上面安装的项目中(请记住,它们可能需要几分钟时间才能完全显示出来,所以你现在可以喝一口咖啡,因为这是过程中唯一的机会)。

    1.9K100

    TensorFlow Lite,ML Kit 和 Flutter 移动深度学习:1~5

    利用 NLP 的功能,虚拟助手可以识别口头语言的命令,并从您上传到助手或保存在他们可以访问的任何在线相册中的图像中识别人和宠物。...", end="") 在接下来的几个步骤中,我们需要将加载的 GloVe 嵌入与项目中包含的单词列表进行匹配。 为此,我们当然必须找到任何给定单词的索引或在任何给定索引处找到该单词。...创建一个简单的可单击部署的图像标题生成模型 虽然我们在上一节“测试”中开发的图像标题生成模型看起来不错,但不是很好。...单击“创建项目”,然后在出现的对话框中填写项目名称。 确保您创建的项目具有唯一的名称。 创建项目后,将为您提供一个仪表板,其中显示了对所有可用资源及其使用情况的监视。...在这里,单击“拓扑”以获取以下部署选项: 在显示有部署选项的屏幕中单击“容器映像”,以调出用于容器映像部署的表单。

    18.7K10

    PowerBI 2020.11 月更新 - 各类图标更新及查找异常

    此外,我们还宣布了新的“字段列表”和“模型视图”的预览。我们添加了一个粉丝最喜欢的:Visual Zoom Slider!...如果您有一个大型模型(超过50个表),那么Power BI会加载并让您确定您要使用的布局,而不是尝试显示所有表并遇到性能错误。...此外,使用缩放滑块不会影响上下文信息,例如计算得出的趋势线。 要使用缩放滑块,只需单击并拖动端点即可调整视图窗口的尺寸。然后单击并拖动它们之间的栏以平移该窗口。...在Power BI中搜索参数下拉列表 我们已经解决了与Power BI服务中的参数下拉列表相关的最大可用性问题之一。...它使您可以轻松地将Anaplan数据和模型连接到Power BI,以与您的特定KPI和品牌保持一致。连接器使您可以将Anaplan模型中保存的导出操作直接加载到Power BI中。

    8.4K30

    如何在Weka中加载CSV机器学习数据

    如何在Weka中加载CSV机器学习数据 在开始建模之前,您必须能够加载(您的)数据。 在这篇文章中,您将了解如何在Weka中加载您的CSV数据集。...整数(Integer)表示没有小数部分数的数值,如5。 标称(Nominal)表示分类数据,如“狗”和“猫”。 字符串(String)表示单词组成的列表,如同这个句子本身。...,以ARFF格式保存您的数据集。你需要输入带有.arff扩展名的文件名并单击“Save”按钮。 您现在可以将保存的.arff文件直接加载到Weka中。...使用Excel中的其他文件格式 如果您有其他格式的数据,请先将其加载到Microsoft Excel中。 以另一种格式(如CSV)这样使用不同的分隔符或固定宽度字段来获取数据是很常见的。...Excel有强大的工具来加载各种格式的表格数据。使用这些工具,并首先将您的数据加载到Excel中。 将数据加载到Excel后,可以将其导出为CSV格式。

    8.6K100

    Windows 10内部的23个隐藏技巧

    如果您使用 多台显示器 ,则此功能在Windows 7和10上可用,可让您调整特定显示器的方向以适合您的需求。最快的方法是同时按Ctrl + Alt + D和任意箭头按钮。...或者,您可以右键单击桌面背景,单击“显示设置”,然后从“显示方向”下拉菜单中选择一个选项,以各种方式翻转页面。 启用滑动关机 ? ?...右键单击图块 ? 是否想快速个性化这些图块?只需右键单击它们以提示弹出菜单。此菜单将为您提供各种选项,例如从“开始”菜单中取消固定,调整窗口大小或关闭活动磁贴的功能。 右键单击任务栏 ?...这会将您所有打开的窗口和应用分隔为图标。然后,您可以将其中任何一个拖到显示“新桌面”的位置,这将创建一个新的虚拟桌面。例如,这将使您可以将工作应用程序,个人应用程序和社交媒体分离到不同的桌面中。...Windows 10应用程序3D Viewer允许您使用3D模型(无论是在Paint 3D中创建的模型,还是从Microsoft的模型库下载的模型)。

    4.3K30

    Google Earth Engine (GEE) ——Earth Engine Explorer (EE Explorer)使用最全解析(8000字长文)

    数据的子集可用于在 EE Explorer 中显示。 单击 EE Explorer 应用程序右上角的数据目录按钮。 在数据目录页面上,您将看到一个流行标签列表,链接到应用了这些标签的数据集。...下面是各种数据类型和多天镶嵌图的列表,包括一些可用数据集的简要描述和直接链接。要访问其他数据集,请使用页面顶部的搜索栏。 单击一些流行的标签以查看它们包含哪些类型的数据集。...例如,toa会显示一个描述“大气层顶部反射率”的数据集列表。 单击usgs会显示来自USGS的数据集列表,包括来自 Landsat、MODIS 的数据集以及从它们派生的产品。...此页面显示有关所选数据集的详细信息,包括其名称、简要说明、示例图像以及可用日期、提供商名称和该数据集的任何标签等信息。...删除图层 单击数据列表中的数据层名称以显示层设置对话框。 单击垃圾箱按钮,该图层将从您的数据列表和地图中删除。

    49210

    利用Office文档结合社会工程学手段欺骗用户执行恶意代码

    首先,OLE对象需要单击才能激活,其次,用户需要双击OLE对象才能实际获得可用的Windows资源管理器视图。最后,用户还需要双击Windows资源管理器视图中的文件。...保护模式IE被禁用用于控件,这确实会阻止显示其他对话框——如UAC对话框。因此,只需要两次单击就可以运行恶意代码,即单击以激活,然后运行/打开。...将显示一个警告对话框,但此对话框与其他警告对话框略有不同,如图6所示。此警告对话框对于所有文件类型都是相同的。 ? Forms.HTML:Image.1接受一个src,可用于配置文档中显示的图像。...受保护的视图 如上所述,文档可能包含Web标记以将文件标记为从因特网下载。如果存在,文档将在受保护的视图中打开。在此模式下,将禁用文档中存在的任何嵌入对象。...对于Shell.Explorer.1对象从对象中提取LNK文件并检索ID列表以找出打开时的内容单击对象。我们的GitHub页面上的ShellLink .NET类库可用于从LNK文件中读取ID列表。

    2.3K30

    创建一个DIY的APM监视Node.js中的Web应用程序的性能

    缓慢的Web服务器提供了降级的用户体验,并可能威胁整个公司的业务。 为了充分了解Web应用程序如何在生产环境中运行,负载测试是不够的。...2.执行时间只显示在控制台中,我们不存储它们,所以我们可以稍后操作它们。...然后我们把它放到一个新的Async Hook中: 现在我们需要为每个HTTP请求创建一个新的context,并提供一种从任何地方访问当前context的方法。...Bonus: Viewer 由于我们的代理正在生成JSON输出,所以我们应该能够以更加用户友好的方式显示时序数据。...使用d3.js和一个不错的时间线插件,我生成了一个网页,以更直观的方式显示代理所做的度量。在Node.js进程结束之后,会创建一个名为viewer.html的文件。

    1.5K80

    如何在 Ubuntu 22.04 上安装 SFTPGo?

    在本教程中,您将学习如何在 Ubuntu Ubuntu 22.04 系统上安装 SFTPGo,我们将探索 v2.3.0 中引入的主要新功能。先决条件一个 Ubuntu 服务器 22.04。...或者,您可以限制共享的使用次数,使用密码保护共享,通过源 IP 地址限制访问,设置自动到期日期。图片然后从共享列表中,选择您刚刚创建的共享并单击“链接”图标。...如您在以下屏幕中所见,将显示可浏览共享的链接。图片现在,编辑共享并将范围更改为“写入”。共享链接将显示以下屏幕。图片因此,您的外部用户可以上传文件,但不能浏览或下载共享内容。...另一方面,如果您重建 SB Admin 2 CSS,则可以将“default_css”设置为自定义 CSS 的路径。这样我们就可以避免加载默认主题,然后用您的更改覆盖它。...图片这样,具有 png 和 jpg 扩展名的文件无法下载或上传,但如果已经存在,则在目录列表中仍然可见。您可以通过将策略设置为“隐藏”来隐藏它们。图片“隐藏”策略是在 v2.3.0 中引入的。

    4K02

    【翻译】使用Tor进行匿名文件分享的开源工具 - OnionShare 2发布

    或者单击“添加文件”和“添加文件夹”按钮来浏览本地文件。 MacOS沙盒 在Windows和Linux中,只有一个“添加”按钮,可以用来选择文件和文件夹。...我的朋友打开Tor浏览器并加载我发给她的OnionShare地址。 她会看到一个网站上有我正在分享的文件列表,还有一个“下载文件”按钮。...在我计算机上的OnionShare中,我可以看到我收到的所有文件的状态。...默认情况下,OnionShare地址看起来是http://[tor-address].onion/[slug],其中slug是7,776个单词列表中的两个随机单词(从技术上讲,这是一个2字的diceware...事实证明,互联网上看到推文的任何人都可以通过发出20次404错误来强制您的服务器停止。 (顺便说一下,这种情况确实发生了,有些服务器一直在关闭,因为人们一直在制造404错误。)

    1.9K30

    如何提高网站曝光量(SEO优化) 增加搜索引擎收录

    如果爬虫发现重定向状态代码(如 301 或 302),它们会跟随重定向到新 URL 并在那里继续。...抓取工具不会主动点击链接或按钮,而是将 URL 发送到队列以便稍后抓取它们。访问新 URL 时,没有 cookie、service worker 或本地存储(如 IndexedDB)可用。...建立索引# 检索文档后,爬虫将内容交给搜索引擎以将其添加到索引中。搜索引擎现在呈现并分析内容以理解它。渲染意味着像浏览器一样显示页面(有一些限制)。...单击灯塔选项卡。 确保在类别列表中选中了SEO复选框。 单击生成报告按钮。 Lighthouse 会为您的页面生成一份报告,以便您查看可以改进网站 SEO 的区域。...覆盖率报告# 该覆盖率报告其网站中的网页进行索引和这表明你的人有问题。 ? 覆盖率报告的屏幕截图。

    2.5K20

    一键完成对话需求?这款插件你不能错过(Unity3D)

    在灵活的、完全可自定义的UI系统中显示会话。 定义玩家要完成的任务/任务。 播放镜头序列,如相机剪辑和音频。 保存和加载游戏,并在场景更改中持久化数据。...您需要对多个数据库进行更多的管理,以跟踪它们,并在适当的时候装入和取出内存,但是它们对于分解您的内容非常有用,既可以用于组织,也可以用于减少在任何给定时间装入内存的内容的数量。...Selectors & Usables 选择器和可用 对话系统提供了一个可选的交互系统,可以与带有可用组件的游戏对象(如npc)进行交互。...如果任何这些副标题面板指定它们应该在对话开始时立即打开,它就会打开它们。 如果你知道对话开始时没有任何面板被配置为打开,则可以取消此复选框以绕过该复选框。 将菜单面板分配给菜单面板列表。...将场景中可以创建的所有衍生对象预制块添加到衍生对象预制块列表中。如果列表中缺少预制组件,那么在加载游戏或返回场景时,派生的对象管理器将无法重新派生它。

    4.8K20

    如何用 Python 执行常见的 Excel 和 SQL 任务

    在 Python 中,不需要知道很多关于正则表达式的知识,但它们是一个强大的工具,可用于匹配和替换某些字符串或子字符串。如果你想了解更多,请参考以下教程。 ? 信任这个网站的一些代码。...每个括号内的列表都代表了我们 dataframe 中的一行,每列都以 key 表示:我们正在处理一个国家的排名,人均 GDP(以美元表示)及其名称(用「国家」)。...有关数据结构,如列表和词典,如何在 Python 中的运行的更多信息,本教程将有所帮助。...轻松地使用它来快速查看数据集,而无需加载整个数据集!如果要查看特定数量的行,还可以在 head() 方法中插入行数。 ? ?...有12个国家的 GDP 超过 50000! 选择属于以 s 开头的国家的行。 现在可以显示一个新 dataframe,其中只包含以 s 开头的国家。

    10.8K60

    用Python执行SQL、Excel常见任务?10个方法全搞定!

    数据从业者有许多工具可用于分割数据。有些人使用 Excel,有些人使用SQL,有些人使用Python。对于某些任务,使用 Python 的优点是显而易见的。以更快的速度处理更大的数据集。...在 Python 中,不需要知道很多关于正则表达式的知识,但它们是一个强大的工具,可用于匹配和替换某些字符串或子字符串。如果你想了解更多,请参考以下内容。 ?...每个括号内的列表都代表了我们 dataframe 中的一行,每列都以 key 表示:我们正在处理一个国家的排名,人均 GDP(以美元表示)及其名称(用「国家」)。...有关数据结构,如列表和词典,如何在 Python 中的运行的更多信息,本篇将有所帮助。...有12个国家的 GDP 超过 50000! 选择属于以 s 开头的国家的行。 现在可以显示一个新 dataframe,其中只包含以 s 开头的国家。

    8.3K20

    有手就行的大模型教程:如何在个人电脑上部署盘古大模型

    有手就行的大模型教程:如何在个人电脑上部署盘古大模型 前言 在当前的人工智能浪潮中,大型预训练模型如盘古等,因其卓越的性能和广泛的应用前景而备受关注。然而,这些模型的部署并非易事,尤其是在个人电脑上。...运行完的文件就在当前文件夹下 Image Name 官网参数说明,以下是各项功能的说明: 帮助与信息选项 • --help: 显示帮助信息,介绍所有可用的命令行选项。...• --download-assets: 如果数据不存在,则下载它们。 其他选项 • --fields: 打印模型作为初始条件所需的字段列表。...• --metadata KEY=VALUE: 在模型输出中添加额外的元数据。 这些选项允许用户精细地控制模型的运行环境,输入输出,以及执行过程中的各种参数,非常适合需要高度定制化操作的场景。...小结 通过本文的介绍,我们了解到在个人电脑上部署盘古大模型并非不可行,但确实需要克服一系列挑战,包括但不限于计算资源的限制、各种bug的应付。

    25010

    MCP Mapping 查看器汉化 – 查看SRG、MCP、混淆名的关系

    文章目录[隐藏] 简介 简单的使用说明 开始 搜索 查看 示例查找 下载 简介 查找SRG、MCP、混淆名(主要是SRG、MCP)之间的关系一直是令人头疼的事情,不过其实MCP开发包中早就提供了一个工具...简单的使用说明 整个程序大致可以分为这5个部分: Mapping下载&选择 搜索 类信息 方法信息 类字段信息 开始 使用时,首先需要点击“获取版本列表”以抓取所有mapping的版本。...然后,在Mapping版本的下拉框中选择一个mapping,再点击右侧的“加载Mappings”即可读入mapping数据。...不仅类的数据可以搜索,方法、字段也可以直接搜索,不过搜索的结果会以类的形式显示。比如搜索“getRegisteredBlock”,结果会是类信息(3)显示Blocks类。...查看 搜索到结果后,在类信息(3)点击一个类就能在方法信息(4)和字段信息(5)处看到相关信息了。在方法信息(4)的左侧点击一个方法,右侧就会显示方法的参数。

    2.3K11
    领券