Skip to content

NocoBase 3D模型在线预览

NocoBase是一个极易扩展的开源无代码开发平台,该平台以提供高效的开发解决方案和灵活的扩展能力为目标,为开发者和非技术背景的用户提供了强大的工具来搭建和管理各种业务系统。

将多种3D模型格式无缝集成到NocoBase业务表单中,实现3D模型的在线预览。这意味着用户可以在不离开NocoBase平台的情况下,直接查看和操作3D模型,极大地提升了数据可视化的效果和用户交互体验。

在NocoBase中进行3D模型在线浏览的实现步骤如下。

1.配置模型数据源表

在系统中找到"数据源"-->"主数据源"-->"配置"按钮,如图步骤1。

在“数据表”选择“创建数据表”-->"普通数据表",如图步骤2。

在“创建数据表”界面填写字段:“数据表名称”:"3D模型管理",“数据表标识”:“t_3dmodel”,如图步骤3。

img

配置模型管理表字段,添加2个字段,分别是“模型主题”、“模型地址”,如图步骤1、2

setfield

2.配置模型管理页面

在菜单栏下添加菜单页面,并且填写“菜单名称”:“3D模型管理”, 如图步骤1、2。

setpage

在页面中创建区块,选择“表格”-->“3d模型管理”数据源,如图步骤1。

在表格中配置字段、如图步骤2。

配置操作“添加”按钮,如图步骤1。

在添加界面的配置表单,配置表单所需的字段和提交按钮,如图步骤2、3。

form

至此,模型的管理界面和添加的表单就配置好了。

可以使用测试数据,添加一条数据到表格,以便下面配置模型预览页面。“模型地址”可填写:https://3dconvert.nsdt.cloud/conv/show?uid=3dshow-843879d8b7-1722922124638&hideOperator=0&hideInfo=1

3.配置模型预览页面

给表格行配置一个弹窗操作用于显示3D模型,可以将将弹窗操作按钮名称修改为“3D模型预览”,如图步骤1、2.

setaction

点击“3D模型预览”行操作按钮,进入模型预览页面配置

将弹窗的页面标题修改为"3D模型预览", 如图步骤1。

将预览界面创建区块:“创建区块”-->"iframe", 如图步骤2。

编辑iframe,设置iframe URL属性,URL属性选择“当前弹窗记录”-->“模型地址”,如图步骤2、3、4。

设置iframe中的高度为“全高”, 如图步骤5。

在表格行操作,“3D模型预览”设置弹窗尺寸为“较宽”, 如图步骤6。

至此、模型管理及预览的设置就完成了完成,可以在表格的行操作中,点击“3D模型预览”进行模型的预览。

4.模型访问地址获取

那么模型的访问地址怎么获得?

访问3D模型在线预览页面,将需要预览的模型文件通过【上传文件】按钮或直接拖拽的方式进行上传。文件自动解析完成后,用户可选择【在线预览】模型,也可以选择【生成模型地址】。

平台支持在线展示的3D模型格式主要包括:GLB,GLTF,PLY,STL,OBJ,OFF,DAE,FBX,DXF,IFC,XYZ,PCD,LAS,LAZ,STP,STEP,3DXML,IGES,IGS,SHP,GEOJSON,XAML,PTS,ASC,BREP,FCSTD,BIM,USDZ,PDB,VTK,SVG,WRL,3DM,3DS,AMF,3MF,DWG,JSON,RFA,RVT。 0bdfd5ab5d33b649e7adad5f0a72a9f1

5.模型预览效果展示

NocoBase中模型浏览效果如下。