【WEB前端2024】简单几步制作web3d《萌宠星球》智体节点模板(2)

【WEB前端2024】简单几步制作web3d《萌宠星球》智体节点模板(2)

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

使用dtns.network的web3d引擎(开源元宇宙/智体世界引擎),我们可以基于《乔布斯3D纪念馆》智体节点模板,轻松制作适用于各行业的web3d智体模板。

本系列教程,我们将针对白领人群的萌宠市场,制作一个3d版本的《萌宠星球》。有兴趣成为《萌宠星球》星主们,可以认真学习以下图文教程。

本节图文教程,主要是利用fast-upload插件和dtns.connector的闪传机制,实现了待上传压缩文件包(共6个,312多MB)的快速复制上传,从而实现了dtns.pet3d智体节点压缩包的镜像文件的快速上传。并利用发送头榜(闪传),供社区粉丝用户快速下载(可达10MB/s甚至更高的下载速度)!

第一步:关闭dtns.pc.exe程序,找到dtns.pet3d文件夹,将其压缩为分包60MB的6个文件(共312MB左右)

注:我们看到上面的压缩包被分包成6个子压缩包(每个均为60MB,结束的分包的大小是19MB)。

第二步:将上述6个压缩包,移动到dtns.pet3d\resources\app\forklist.network\plugins\fast-upload\src文件夹下(使用fast-upload插件)

注:复制成功后,返回到fast-upload路径

第三步:鼠标右键"在终端打开",在powershell或cmd命令行输入窗口输入:node fast_upload.js

注:输入node fast_upload.js后,回车键(点击键盘),得到如上图的运行结果。看到 zip.00 copy ok! 共6个文件被copy成功,证明已经运行完成!

第四步:将fast-upload/file_temp文件夹下的sha256sum文件名的6个文件,移动至目标文件存储路径forklist.network/file_temp路径下

复制如上图所示的:plugins/fast-upload/file_temp下的这6个sha256sum命名的文件。移动至forklist.network/file_temp下(如下图所示)

复制成功后,如上图所示。

第五步:点击dtns.pet3d路径下的dtns.pc.exe,运行《萌宠星球》ib3.hub智体节点

如上图所示,点击dtns.pc.exe可执行文件,启动智体节点。

第六步:点击最下面的底栏【头榜】栏,再点击右上角的+号,进入发布萌宠头榜内容的页面

第七步:将刚才的6个压缩包文件上传

注:将头榜文字内容框输入为"dtns.pet3d模板.zip文件下载列表(6个分包文件),点击右上角【确认】,发布头榜成功。

注2:我们看到,每上传一个文件,不过1-2秒反应时间,这预示着刚才的sha256sum命名的6个文件,已经避免了慢速上传(1-2MB/s),而是使用了判断是否该文件已上传过(通过sha256的hash-sum实现判断闪传功能)

第八步:回到头榜页面,看到最新的头榜内容

我们看到,刚才上传的6个文件,已经在头榜列表中了。

第九步:点击下载这6个分包文件

将其保存在windows的【下载】路径,如下图所示:

第十步:点击dtns.pet3d.zip.001进行全部压缩分包的角压缩(共6个分包,解压001即可全部解压缩)

如上图所示:我们看到总大小为674MB,证明解压缩的不仅仅是一个分包,而是完整zip包。

第十一步:全部解压缩成功后,我们进行downloads/dtns.pet3d路径下

第十二步:进入forklist.network路径,修改config_roomid.js中的g_dev_roomid为dev00pet3d2

第十三步:回到downloads/dtns.pet3d路径下,打开dtns.pc.exe可执行文件,切换节点为dev00pet3d2

如上图所示:点击确认切换。

第十四步:点击中间位置的直接以密钥登录,输入开发者密钥,点击【确定】按钮

注:输入的开发者密钥为Eh4gDYYKowP2JQMmHbTAGi6hvtvhj6BpoMK5Khc8TzPZ

第十五步:登录成功,点击头榜查看内容列表

点击底部的头榜底栏按钮,切换至头榜页面(如下图)

至此,我们初步完成了web3d《萌宠星球》智体节点的完整的模板.zip文件制作(将制作好并改名为dtns.pet3d文件夹压缩为.zip文件),并实现了文件快速闪传和极速下载(6个压缩包文件,最慢不超过1分钟即可完成下载)

总结:经过上这述15步,我们实现了以《乔布斯3D纪念馆》为模板的web3d《萌宠星球》智体节点模板的完整压缩包.zip制作(后续可以通过不断完善该智体节点的3D内容、头榜内容、图文内容、视频内容、语音内容、群聊权限、小店供应链、标准实时订单系统等组件完善3D萌宠星球的配套服务),并实现了通过fast-upload的sha256-hash机制实现极速模板文件上传,以便发布头榜,供社区粉丝极速下载!

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

开源地址:

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

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

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

加入QQ群:279931001

加入微信群:

相关推荐
前端李易安9 分钟前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
红绿鲤鱼11 分钟前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
Domain-zhuo21 分钟前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式
web3探路者27 分钟前
深入探索Solana链上的Meme生态:创新、潜力与挑战#区块链开发#dapp开发
web3·区块链·团队开发·dapp开发·区块链技术·链游开发·交易所开发
小丁爱养花29 分钟前
前端三剑客(三):JavaScript
开发语言·前端·javascript
ZwaterZ37 分钟前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
码农六六37 分钟前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui
西凉河的葛三叔41 分钟前
vue3+elementui-plus el-dialog全局配置点击空白处不关闭弹窗
前端·vue3·elementui-plus
徐同保42 分钟前
el-table 多选改成单选
javascript·vue.js·elementui
快乐小土豆~~42 分钟前
el-input绑定点击回车事件意外触发页面刷新
javascript·vue.js·elementui