【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第47课-动态切换内嵌blender展厅的壁画
使用dtns.network德塔世界(开源的智体世界引擎),策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智体世界引擎(内嵌了three.js编辑器的定制版-支持以第一视角游览3D场馆),可以在浏览器和node.js、deno、electron上运行,它是一个跨平台的软件,支持多个操作系统使用!并且支持使用内置的poplang智体编程语言实现3D组件的智能化编程------语法超简单,一句话语法,人人轻松上手!
下面分为几步介绍,如何基于dtns.network智体世界引擎实现乔布斯3D纪念馆的碟状总部的内嵌blender展厅的壁画的动态切换。使用云盘cd实现对壁画文件的管理、添加、删除等,可以实时动态的变更blender展厅的壁画。从而通过简单方便的功能实现了对3D纪念馆的内容的实时管理。让3D展厅,除了固定的3D摆件形象之外,还能拥有更加强大的网络通讯、3D摆件内容或3D场景实时管理和更换功能,方便了3D场景的管理。
期间,为了实现内嵌blender展厅的内容变换,我们调用了dtns-api:/clouddisk/folder/files,实现了云般cd(clouddisk)的文件夹所有文件的查询功能。并且使用了$.g_3d_object_texture_image_set动态设置了blender展厅的壁画的图片纹理。从而实现了3D场馆的壁画的动态切换。
第一步:打开头榜页面,找到3D纪念馆xverse轻应用
![](https://img-blog.csdnimg.cn/img_convert/9d4f65670f2797aba00dc95801c7360a.jpeg)
注:找到标题为"3D纪念馆-加载3D模型的json文件作为3D玩家形象"的xverse轻应用。
第二步:点击右上角...进入头榜编辑器
![](https://img-blog.csdnimg.cn/img_convert/7b954c926ca796627640f34f3b2a469a.jpeg)
注:因为每一个xverse轻应用均是以xverse.json的方式进行源码级应用的分享的。故每一个社区用户均可通过编辑xverse轻应用源码来实现DIY和定制。
第三步:点击正面的"编辑xverse轻应用源码",进入3D场馆编辑器
![](https://img-blog.csdnimg.cn/img_convert/a3a11f3eaa552b464486f00543b76e44.jpeg)
注:点击前言的blender展厅的墙体,在右侧的属性面板中找到脚本-编辑。
第四步:编辑墙体3D组件的poplang代码
![](https://img-blog.csdnimg.cn/img_convert/33f899b191d97a3e1abb8dfe62082c6f.jpeg)
注:首先使用/clouddisk/folder/files的dtns-api实现了查询文件夹ID:obj_folder*的文件列表。并且使用object.get和array.get指令,循环遍历了所有的文件-以使到图片纹理的文件ID(保存在val中),然后通过$.g_3d_object_texture_image_set来将所有的draw1-draw13的壁画的图片纹理全部动态设置为云文件夹dfolder的图片文件ID(只要将该文件夹的图片进行变更,就能实现了3D展馆内置blender展厅的壁画的动态切换------后台管理使用简单方便)
第五步:点击顶部菜单"视频"玩家视角(关闭),以便以俯视视角查看和更新内嵌blender展厅的壁画的材质属性
![](https://img-blog.csdnimg.cn/img_convert/21b6f5d97738d34e110050f291220d09.jpeg)
以俯视方式找到第一个draw1的壁画,进行ID的更新(先将材质设置为其它,再变更回来STANDARDMETARIAL材质,并勾选中贴图)
![](https://img-blog.csdnimg.cn/img_convert/11968a4ddececac4e2b99ffece987a88.jpeg)
如上图所示:将识别码ID更新为新的,以便动态设置该壁画的贴图,不会影响关联的壁画(因导入该blender展厅,会默认使用同一个材质属性和识别码ID,导致api变更贴图会全部一个样)
然后每一个draw2-draw13均完成如draw1壁画一样的材质更新识别码ID的操作(如下图所示)
![](https://img-blog.csdnimg.cn/img_convert/47e340b46090abc40164aebf798dc18a.jpeg)
注:千万不要忘记将贴图勾选选中(否则无法显示图片贴图)
然后将视角切换回blender展厅门前,点击顶部菜单"视图"玩家视角(启用)
![](https://img-blog.csdnimg.cn/img_convert/5a887eca37d40aecd69bbc509e3224d4.jpeg)
第六步:点击顶部菜单"文件"推送头榜(作品),将此3D纪念馆以xverse轻应用方式分享给其他用户
![](https://img-blog.csdnimg.cn/img_convert/2398a312cc0c78b0361c9cbc9a63e939.jpeg)
第六步:将新的头榜标题设置为"3D纪念馆-动态切换内置blender展厅的壁画",点击右上角确认完成头榜发布
![](https://img-blog.csdnimg.cn/img_convert/3d4009257688e113af20243f465d2c2b.jpeg)
注:标题为xmsg,不能误删除""双引号,否则会发布失败------仅修改xmsg属性的文字内容即可。
第七步:找到刚发布的xverse轻应用头榜,点击进入3D场景游览器
![](https://img-blog.csdnimg.cn/img_convert/eddf44596302ff5aa848f8d4e0b109ae.jpeg)
注:轻轻一点击,即可进入体验刚发布好的xverse-3D轻应用(智体应用),我们相当于可以无限地分享和裂变这个开源的3D轻应用(智体应用)。这样大家便可以按自己的需求,轻松的修改和定制这些动画的源码模板了。可以形成自己的故事、自己的动画、自己的3D场馆、自己的3D互动剧情等等。随心所欲地发挥,所以智体世界、智体OS也相当于【元宇宙】【开放世界】!
第八步:进入3D轻应用后,我们控制底中部的滚动玩控制玩家移动,并进入到内嵌的blender展厅中(可看到加载了云盘文件夹的图片)
![](https://img-blog.csdnimg.cn/img_convert/63186b2f7fa3552119315c9d7c93361e.jpeg)
通过滚动球控制玩家视角向前移动,向着内嵌的blender展厅的门口进发并进入到blender展厅中(如下图所示)
![](https://img-blog.csdnimg.cn/img_convert/447ca5c3d3eec2ba4ba8f5956e58f3a0.jpeg)
注:我们看到,已经实现了壁画的动态加载(加载了云盘中的图片文件列表)
第九步:回到首页、点击智体IB、输入cd进入到云盘"vrgallery"云文件夹,删除掉前3图图片,可看到blender内置展厅的壁画发生了改变
![](https://img-blog.csdnimg.cn/img_convert/019dd8e987681d93583209207ba3c241.jpeg)
删除前3张图片
![](https://img-blog.csdnimg.cn/img_convert/96790574fa67d3ff0893d76a0a623769.jpeg)
重新进入到内嵌的blender展厅(如下图所示)
![](https://img-blog.csdnimg.cn/img_convert/c5e4a53acef2bd77dccd687573e0c1c3.jpeg)
我们看到,刚才的前3张壁画已经发生了变更,并且再继续往前走,可以看到所有的壁画均加载为云盘dfolder中的图片文件列表(如下图所示)
![](https://img-blog.csdnimg.cn/img_convert/3ef4338c25ace062985a8a73ccfc0b20.jpeg)
注:整个加载效果非常不错,非常简单地通过云盘dfolder实现了内嵌blender展厅的壁画切换(对于其它的3D摆件,动态变更纹理贴图内置亦可采用同样的做法------即使用dtns-api实现3D场馆内容的切换。
通过上述9步,我们成功完成了《乔布斯3D纪念馆》的飞碟形态的3D纪念馆的内嵌blender展厅的壁画的图片纹理的动态切换。展示了使用dtns-api查询云盘图片文件列表,并采用poplang的指令随时变更3D场馆内容的能力,从而极大程度上使得3D场景内容拥有无限的后台管理的能力和可能性,使得3D纪念馆的经营者,可以随时所欲、随时随地的变更3D场景内容,实现内容的按需、按时刷新。
我们也看到了poplang智体编程语言的强大能量,一两行简单的指令,即可完成复杂的3D互动的交互效果、音效效果的开发。并且通过xverse-json源文件(3D轻应用)的方式进行社区分享,使得开源开放、公开透明的3D场馆的设计,能被大家更多的学习和继承,达到互动学习、互动成长的目的。这也是智体OS、智体互动式教育-学习的目标。
注:dtns.network德塔世界(开源的智体世界引擎)是在github和gitee上开源的项目!