【WEB前端2024】开源智体世界：乔布斯3D纪念馆-第19课-活动报名表单

【WEB前端2024】开源智体世界：乔布斯3D纪念馆-第19课-活动报名表单

使用dtns.network德塔世界（开源的智体世界引擎），策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智体世界引擎（内嵌了three.js编辑器的定制版-支持以第一视角游览3D场馆），可以在浏览器和node.js、deno、electron上运行，它是一个跨平台的软件，支持多个操作系统使用！

下面分为几步介绍，如何基于dtns.network智体世界引擎如何实现乔布斯3D纪念馆的碟状总部的展览馆摆件的摆件点击跳转《活动报名表单》。并实现活动报名表单的提交、查看等。

该《活动报名表单》功能，使用了dtns.form表单引擎。通过通过该无代码表单引擎，实现丰富的表单流程效果。无须编码，即可在各个场景应用下嵌入该表单引擎。例如头榜发布、我的文件夹添加上传文件、表单活动报名、设置节点密钥、复制头榜内容等等。

第一步：打开智体IB，输入form或点击底部右下角+号选择表单，跳转表单设计功能页面（表单引擎）

点击表单或输入form发送后跳转表单引擎（如下图）

第二步：双击【输入框】，在中间表单画布会自动添加【输入框】

选择不同的组件，可添加不同的功能的组件。

第三步：在右侧的表单属性，修改标签为“姓名”

将标签名修改为“姓名后”，可看到中间的表单画布自动会将原“输入框”变更为“姓名”

第四步：点击左侧的【输入框】或【文本框】组件，直至全部添加并修改完成（如下图所示）

如上图所示，至此，已经将本活动报名表单的输入项全部设置完成，共有“姓名、手机号、微信号、公司、职务、地址、兴趣点”多个输入项内容。而后在顶部的工具栏，找到“生成JSON”

第五步：点击“生成JSON”，再点击【导出代码】按钮，发布至头榜

注：点击导出代码，会自动下载该json文件，同时将上传至智体节点、推送至头榜。

第六步：编辑发送的头榜标题为“乔布斯3D纪念馆《活动报名表单》”，点击右上角“确认”发布头榜成功

修改完头榜的xmsg标题后，点右上角【确认】按钮，发布头榜成功！

第七步：返回头榜页面，找到刚发布的“乔布斯3D纪念馆《活动报名表单》”头榜内容

点击“表单文件…form.json”文件，下载它，并打开它。

第八步：打开上述的表单文件，填写默认的《乔布斯3D纪念馆活动报表表单》模板

注：务必每一项都仔细填写，以提供给活动报名嘉宾作为样板。填写完成后，点击右上角【发布】按钮，发布至头榜。

将头榜标题修改为“我的活动报名表单——乔布斯”，点击右上角【确认】按钮，发布头榜成功。

第九步：返回头榜页面，找到刚才发布的“我的活动报名表单——乔布斯”头榜内容

第十步：点击右上角的…，进入头榜内容编辑器，复制文件ID

注：务必看清楚xmsg为“我的活动报名表单——乔布斯”，对应的dtns_url中的filename=之后的才是文件ID（前缀为obj_file*）

第十一步：在头榜页面，找到简版乔布斯3D纪念馆

第十二步：点击简版乔布斯3D纪念馆头榜的右上角…，进入头榜内容编辑器

第十三步：点击下部位的【编辑xverse轻应用源码】，进入3D场景编辑器

注：通过滚轮，将视角移动至《乔布斯传》3D摆件的前方。点击选中《乔布斯传》3D摆件，将右侧属性面板滚动至最下面，可看到“脚本”为止

第十四步：点击选右侧属性面板最下面的“脚本”-编辑按钮，进入poplang智体编程脚本编辑器，使用ib3.file.go跳转刚才复制的表单文件ID

注：使用ib3.toast提示“乔布斯3D纪念馆《活动报名表单》”，并使用ib3.file.go指令，跳转刚才复制的表单文件ID：obj_filefileGR2P8Xx5（复制自己的表单文件ID），修改完成后，点击右上角的X，保存并退出脚本编辑器。

第十五步：点击顶部菜单【文件】，选择“推送头榜（作品）”选项，将本3D场馆json源文件发布至头榜

点击推送头榜

第十六步：编辑头榜标题为“乔布斯3D纪念馆《活动报名表单》”

注：编辑好标题后，点击右上角【确认】按钮，发布头榜成功。

第十七步：返回头榜，找到刚才发布的《乔布斯3D纪念馆》

第十八步：点击进入《乔布斯3D纪念馆》

注：使用滚轮，移动视角至《乔布斯传》正前方位置。

第十九步：点击《乔布斯传》3D摆件，进入活动报名表单

可看到消息提示为“乔布斯3D纪念馆《活动报名表单》”

第二十步：输入报名表单内容，点击右上角【发布】

第二十一步：修改头榜标题为“贵宾的活动报名表单”

点击右上角确认，发布头榜成功。

第二十二步：在头榜页面，找到刚发布的头榜

第二十三步：点击表单文件，进入查看“贵宾的活动报名表单”

我们看到了姓名为“贵宾”的活动报名表单的所有表单细项内容。如手机号、微信号为隐私资料，可设置为模板的1000000和100（即隐私保护了的号码），由智体节点管理员直接通过私信联系报名的贵宾即可。

通过上述23步，我们成功完成了《乔布斯3D纪念馆》的飞碟形态的摆件的跳转活动报名表单功能。通过强大的dtns.form表单 引擎，可以无代码或低代码实现强大的3D场馆-2D表单内容的跳转。表单功能为整个智体节点应用，植入了强大的业务流程能力。并且无代码或低代码实现任意业务流程。

注：dtns.network德塔世界（开源的智体世界引擎）是在github和gitee上开源的项目！

开源地址：

github地址：https://github.com/dtnsman/dtns

Gitee地址：https://github.com/dtnsman/dtns

官方文档：https://dtns.network.yunapi.org

加入QQ群：279931001

加入微信群：