【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或点击底部右下角+号选择表单,跳转表单设计功能页面(表单引擎)

1.png

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

2.png

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

3.png

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

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

4.png

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

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

5.png

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

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

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

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

7.png

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

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

8.png

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

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

9.png

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

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

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

11.png

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

12.png

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

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

13.png

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

13-1.png

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

14.png

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

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

15.png

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

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

16.png

点击推送头榜

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

17.png
注:编辑好标题后,点击右上角【确认】按钮,发布头榜成功。

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

18.png

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

19.png

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

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

20.png

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

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

21.png

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

22.png

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

第二十二步:在头榜页面,找到刚发布的头榜

23.png

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

24.png

我们看到了姓名为“贵宾”的活动报名表单的所有表单细项内容。如手机号、微信号为隐私资料,可设置为模板的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

加入微信群:

wechat-qr (2).png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/613644.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Jenkins android 自动打包安卓 centos8.5 运维系列五

1 新建项目android #cat android.sh #!/bin/bash rm -rf /data/.jenkins/workspace/android/app/build/outputs/apk/debug/* rm -rf /data/.jenkins/workspace/android/app/build/outputs/apk/release/* cd /data/.jenkins/workspace/android/app source /etc/profile g…

【QA】Java集合常用的函数

文章目录 前言Collection接口通用函数 | Collections工具类通用函数 | List接口 Set接口List接口ArrayListLinkedList Set接口TreeSetHashSetLinkedHashSet Map接口通用函数TreeMapHashMapLinkedHashMap 前言 本文介绍Java集合中常用的函数。 Collection接口 通用函数 | Co…

数据结构(十三)----几种特殊的树

目录 一.二叉排序树 1.二叉排序树的查找 2.二叉排序树的插入 3.二叉排序树的构造 4.二叉树的删除 5.二叉排序树的查找效率 二.平衡二叉树 1.平衡二叉树的插入 2.平衡二叉树的查找效率 3.平衡二叉树的删除 三.红黑树 1.红黑树的概念 2.红黑树的查找 3.红黑树的插入…

QT_day1

#include "mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(parent) {//修改窗口标题this->setWindowTitle("4.6.0");//修改窗口图标this->setWindowIcon(QIcon("C:\\Users\\zj\\Desktop\\yuanshen\\icon"));//修改窗口大小this…

【VMware】vSphere 8.0 安装和设置简介

本信息的目标读者为熟悉虚拟机技术和数据中心操作并具有丰富经验的 Windows 或 Linux 系统管理员。 vSphere 8.0 提供了各种安装和设置选项,这些选项定义了相应的任务序列。 vSphere 的两个核心组件是 ESXi 和 vCenter Server。ESXi 是可用于创建和运行虚拟机和虚拟…

AI地名故事:庙头村

庙头村的名字来源于隋朝时期。当时,村前建有一座南海神庙,这也是我们村名的由来,并一直沿用至今。这座南海神庙不仅是历朝历代朝廷政府举办出海海祭(国家仪式)的地方,更是广州海上丝绸之路的起点。这里保存…

Github 2024-05-07 开源项目日报 Tp10

根据Github Trendings的统计,今日(2024-05-07统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量TypeScript项目4Jupyter Notebook项目2Python项目1Batchfile项目1非开发语言项目1Java项目1HTML项目1C#项目1从零开始构建你喜爱的技术 创建周期…

数据中心运维智能化管理 效果多炸裂?

从人工走向智能,一切的变化来源于数据中心规模化、系统复杂性和设备多样性的挑战,将平台运维的重要性推到了高点。 #01 为何要智能化? — 企业IT建设不断深入和完善,业务对系统稳定性和连续性的依赖,智能化将是更好…

浅析扩散模型与图像生成【应用篇】(二十三)——Imagic

23. Imagic: Text-Based Real Image Editing with Diffusion Models 该文提出一种基于文本的真实图像编辑方法,能够根据纯文本提示,实现复杂的图像编辑任务,如改变一个或多个物体的位姿和组成,并且保持其他特征不变。相比于其他文…

【JS红宝书学习笔记】第1、2章

第1章 什么是JavaScript JavaScript 是一门用来与网页交互的脚本语言,包含以下三个组成部分。 ECMAScript:由 ECMA-262 定义并提供核心功能。文档对象模型(DOM):提供与网页内容交互的方法和接口。浏览器对象模型&…

Adobe Premiere Pro v24.3.0 解锁版 (领先的视频编辑软件)

前言 Adobe Premiere Pro(简称PR)是一款知名的专业视频编辑软件,数字视频剪辑软件。主要用来编辑视频和音频,可以在RGB和YUV色彩空间中以高达32位色彩的视频分辨率对4K和更高质量的视频文件进行编辑,支持VST音频插件和…

el-select选项框内容过长

利用popper-class实现选项框内容过长&#xff0c;截取显示功能&#xff1a; <el-select popper-class"popper-class" :popper-append-to-body"false" v-model"value" placeholder"请选择"><el-optionv-for"item in opt…

你不知道的ConstraintLayout高级用法

文章目录 1. ConstraintLayout介绍2. 高级用法2.1 Gone Margin2.2 偏移2.3 居中2.4 尺寸约束2.5 链2.6 角度定位&#xff08;圆形定位&#xff09; 3. 工具类3.1 Guideline&#xff08;参考线&#xff09;3.2 Barrier&#xff08;栅栏&#xff09;3.3 Group&#xff08;组&…

2023年建筑特种作业人员安全生产知识试题

100分题库提供安全员考试试题、建筑安全员考试预测题、建筑安全员ABC考试真题、安全员证考试题库等&#xff0c;提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 判断题&#xff08;1-20&#xff09; 1.《建筑工程安全生产管理条例》是我国第一部关于…

docker搭建redis6.0(docker rundocker compose演示)

文章讲了&#xff1a;docker下搭建redis6.0.20遇到一些问题&#xff0c;以及解决后的最佳实践方案 文章实现了&#xff1a; docker run搭建redisdocker compose搭建redis 搭建一个redis’的过程中遇到很多问题&#xff0c;先简单说一下搭建的顺序 找一个redis.conf文件&…

PMP证书好考吗?

PMP新考纲还颠覆了自己旧有的五大知识领域&#xff0c;将原来的五大过程组整合成新领域中过程的一部分&#xff0c;提出了新的商业环境、过程、人员三大知识领域。 最关键的是&#xff0c;在新考纲中明确写到&#xff1a; 重要注意事项。通过工作任务分析开展的研究证实&…

WebSocket基础知识

WebSocket是什么&#xff1f; WebSocket 是一种网络通信协议&#xff0c;它提供了全双工通信机制&#xff0c;允许服务器主动向客户端发送消息&#xff0c;而不仅限于响应客户端的请求。它使用类似于 HTTP 的握手来建立连接&#xff0c;然后使用单独的持久连接来进行通信。这种…

上海计算机学会2023年9月月赛C++丙组T2Z形填充

题目描述 给定一个整数 n&#xff0c;再给定 n2 个字符&#xff0c;请将这些字符以 z 形排成一个 nn 的矩阵。 z 形的定义是&#xff0c;第一个字符在左上角&#xff0c;然后沿对角线以 z 形放置字符。对于 n4 &#xff0c;z 形排列的先后顺序标记如下&#xff1a; 输入格式 …

用友GRPA++Cloud任意文件读取

文章目录 免责声明漏洞描述漏洞原理影响版本漏洞复现修复建议 免责声明 文章只供交流与学习&#xff0c;切莫做违法犯罪的事情 漏洞描述 用友 GRP-ACloud 政府财务云产品是以政府会计准则和预算管理一体化规范为基准&#xff0c;服务于政府行政事业单位&#xff0c;落实国家…

高标准农田建设项目天空地一体化智慧监管平台

一、建设背景 党中央、国务院高度重视高标准农田建设。国务院办公厅印发的《关于切实加强高标准农田建设提升国家粮食安全保障能力的意见》 明确提出&#xff0c;大力推进高标准农田建设&#xff0c;到2022年&#xff0c;建成10亿亩高标准农田&#xff0c;以此稳定保障1万亿斤以…