【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第42课-多人联机-实时互动

本文主要是介绍【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第42课-多人联机-实时互动,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第42课-多人联机-实时互动

使用dtns.network德塔世界(开源的智体世界引擎),策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智体世界引擎(内嵌了three.js编辑器的定制版-支持以第一视角游览3D场馆),可以在浏览器和node.js、deno、electron上运行,它是一个跨平台的软件,支持多个操作系统使用!并且支持使用内置的poplang智体编程语言实现3D组件的智能化编程——语法超简单,一句话语法,人人轻松上手!

下面分为几步介绍,如何基于dtns.network智体世界引擎如何实现乔布斯3D纪念馆的碟状总部的多人联机的实时互动功能。多人联机常见于各类的多人联机互动游戏中。联机具备着非常实时性、强互动性、强沉浸感、强交互特性。所开发的游戏、互联网应用,均具备强社区、社交功能,交互方式简单明快,可以大大增强游戏或社交应用的可玩性和社交属性,带动玩家社区的形成。

为了实现联机互动功能,我们需要先通过api:/rtchannel/create?channel=rt3dplayer进行创建实时联机的数据频道,并使用api:/rtchannel/focus?channel=rt3dplayer进行订阅。然后通过数据总线订阅后端返回的实时订阅数据:ib3.event.bus.on rt3dplayer onEvent,并在onEvent函数中判断是showPlayer显示玩家或movePos移动位置。显示玩家可采用 . g 3 d o b j e c t a d d 指令和 .g_3d_object_add指令和 .g3dobjectadd指令和.g_3d_create_text_image、 . g 3 d o b j e c t t e x t u r e i m a g e s e t 指令,移动在线玩家的位置可使用 .g_3d_object_texture_image_set指令,移动在线玩家的位置可使用 .g3dobjecttextureimageset指令,移动在线玩家的位置可使用.g_3d_object_pos_move指令。

第一步:打开头榜页面,找到3D纪念馆xverse轻应用

1.png

注:找到标题为“3D纪念馆-实时添加3D对象”的xverse轻应用。

第二步:点击右上角…进入头榜编辑器

2.png

第三步:点击正面的“编辑xverse轻应用源码”,进入3D场馆编辑器

3.png

注:选中左侧的墙体,可在右侧属性面板的下方“脚本”进行新建-编辑脚本。

第四步:编写多人联机、实时互动显示玩家位置的poplang代码

4.png

注:为了实现联机互动功能,我们需要先通过api:/rtchannel/create?channel=rt3dplayer进行创建实时联机的数据频道,并使用api:/rtchannel/focus?channel=rt3dplayer进行订阅。然后通过数据总线订阅后端返回的实时订阅数据:ib3.event.bus.on rt3dplayer onEvent,并在onEvent函数中判断是showPlayer显示玩家或movePos移动位置。显示玩家可采用 . g 3 d o b j e c t a d d 指令和 .g_3d_object_add指令和 .g3dobjectadd指令和.g_3d_create_text_image、 . g 3 d o b j e c t t e x t u r e i m a g e s e t 指令,移动在线玩家的位置可使用 .g_3d_object_texture_image_set指令,移动在线玩家的位置可使用 .g3dobjecttextureimageset指令,移动在线玩家的位置可使用.g_3d_object_pos_move指令。

其中,关于showPlayer和movePos的代码如下:

5.png

注:如上图所示,showPlayer为首次添加该user-id的玩家至当前3D场馆中时进行添加3D对象组件。后续同步的实时位置,即通过movePos来更新对应user-id的玩家位置。以实现多人联机的实时跑酷运动的3D场馆。

第五步:点击顶部菜单“文件”推送头榜(作品),将此3D纪念馆以xverse轻应用方式分享给其他用户

6.png

注:为了让手机用户能与PC端用户实时进行多人联机互动,我们须将编辑好的xverse轻应用以json源码的方式分享给社区用户,方便他们点击进入该xverse轻应用,一起实现多人联机互动体验。

第六步:将新的头榜标题设置为“3D纪念馆-多人联机实时互动”,点击右上角确认完成头榜发布

7.png

注:标题为xmsg,不能误删除“”双引号,否则会发布失败——仅修改xmsg属性的文字内容即可。

第七步:找到刚发布的xverse轻应用头榜,点击进入3D场景游览器

8.png

注:轻轻一点击,即可进入体验刚发布好的xverse-3D轻应用(智体应用),我们相当于可以无限地分享和裂变这个开源的3D轻应用(智体应用)。这样大家便可以按自己的需求,轻松的修改和定制这些动画的源码模板了。可以形成自己的故事、自己的动画、自己的3D场馆、自己的3D互动剧情等等。随心所欲地发挥,所以智体世界、智体OS也相当于【元宇宙】【开放世界】!

第八步:进入3D轻应用后,我们控制底中部的滚动玩控制玩家移动,并且在手机上亦同样打开该xverse轻应用,进行多人联机的实时互动-跑酷测试!

9.png

注:我们移动手机端的玩家向前至blender内嵌展厅方向,出现在了PC端的玩家视角前方(如上图)

我们接着控制PC端的玩家移动至手机玩家前方,然后转向至手机玩家方向(后方,如下图所示)

10.png

手机截图如下:

p11.jpg

注:我们看到手机端的视角,出现了PC端的玩家user-id。可见多人联机互动功能已实现。

通过上述8步,我们成功完成了《乔布斯3D纪念馆》的飞碟形态的3D纪念馆的多人联机的实时互动功能。通过异常短少的代码,即实现了多人联机的3D实时互动。使得3D场馆,不再仅仅是单机应用,而是具备社交功能的、能与朋友们在线一起互动的多人联机互动的3D场馆。这将为后续开发的3D互动场馆或游戏3D场景,提供了参考和打下了基础。

我们也看到了poplang智体编程语言的强大能量,一两行简单的指令,即可完成复杂的3D互动的交互效果、音效效果的开发。并且通过xverse-json源文件(3D轻应用)的方式进行社区分享,使得开源开放、公开透明的3D场馆的设计,能被大家更多的学习和继承,达到互动学习、互动成长的目的。这也是智体OS、智体互动式教育-学习的目标。

注:dtns.network德塔世界(开源的智体世界引擎)是在github和gitee上开源的项目!

这篇关于【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第42课-多人联机-实时互动的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1069751

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

2024年流动式起重机司机证模拟考试题库及流动式起重机司机理论考试试题

题库来源:安全生产模拟考试一点通公众号小程序 2024年流动式起重机司机证模拟考试题库及流动式起重机司机理论考试试题是由安全生产模拟考试一点通提供,流动式起重机司机证模拟考试题库是根据流动式起重机司机最新版教材,流动式起重机司机大纲整理而成(含2024年流动式起重机司机证模拟考试题库及流动式起重机司机理论考试试题参考答案和部分工种参考解析),掌握本资料和学校方法,考试容易。流动式起重机司机考试技

【专题】2024飞行汽车技术全景报告合集PDF分享(附原数据表)

原文链接: https://tecdat.cn/?p=37628 6月16日,小鹏汇天旅航者X2在北京大兴国际机场临空经济区完成首飞,这也是小鹏汇天的产品在京津冀地区进行的首次飞行。小鹏汇天方面还表示,公司准备量产,并计划今年四季度开启预售小鹏汇天分体式飞行汽车,探索分体式飞行汽车城际通勤。阅读原文,获取专题报告合集全文,解锁文末271份飞行汽车相关行业研究报告。 据悉,业内人士对飞行汽车行业

高效录音转文字:2024年四大工具精选!

在快节奏的工作生活中,能够快速将录音转换成文字是一项非常实用的能力。特别是在需要记录会议纪要、讲座内容或者是采访素材的时候,一款优秀的在线录音转文字工具能派上大用场。以下推荐几个好用的录音转文字工具! 365在线转文字 直达链接:https://www.pdf365.cn/ 365在线转文字是一款提供在线录音转文字服务的工具,它以其高效、便捷的特点受到用户的青睐。用户无需下载安装任何软件,只

Linux 网络编程 --- 应用层

一、自定义协议和序列化反序列化 代码: 序列化反序列化实现网络版本计算器 二、HTTP协议 1、谈两个简单的预备知识 https://www.baidu.com/ --- 域名 --- 域名解析 --- IP地址 http的端口号为80端口,https的端口号为443 url为统一资源定位符。CSDNhttps://mp.csdn.net/mp_blog/creation/editor

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如,在当前目录下创建一个名为 myenv 的虚拟环境: python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行: source myenv/bin/activate 3.与notebook连接 在虚拟环境中,使用 pip 安装 Jupyter 和 ipykernel: pip instal