【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第38课-密室逃脱-3D互动剧情

server/2024/12/22 20:29:44/

【WEBhtml" title=前端>前端2024】3D智体编程:乔布斯3D纪念馆-第38课-密室逃脱

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

下面分为几步介绍,如何基于dtns.network智体世界引擎如何实现乔布斯3D纪念馆的碟状总部的3D互动剧情——密室逃脱。一般的密室逃脱都是通过房间里的摆件,储物柜等,存放着钥匙或者密码箱的密码。我们可以通过3D摆件点击后显示出密码门/密码箱的密码来实现3D互动剧情——密室逃脱。

同上一节,我们通过 . g 3 d o b j e c t t e x t u r e i m a g e s e t 实现了 3 D 组件的纹理贴图设置功能(可设置图片或文字贴图图片),并可使用 .g_html" title=3d>3d_object_texture_image_set实现了3D组件的纹理贴图设置功能(可设置图片或文字贴图图片),并可使用 html">.g3dobjecttextureimageset实现了3D组件的纹理贴图设置功能(可设置图片或文字贴图图片),并可使用.g_html" title=3d>3d_create_text_image实现将文字转为图片(base64编码),以便在纹理设置指令中使用它。

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

1.png

注:找到标题为“3D纪念馆-自动切换纹理”的xverse轻应用。

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

html" title=3d>3d2b227dc6.png#pic_center" alt="在这里插入图片描述" />

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

3.png

注:我们点击“视图”关闭玩家视角, 以便缩放3D场馆,移动视角到合适的位置(blender内置展厅的壁画前面)

第四步:选中blencer内嵌展厅的其中一个壁画

4.png

注:通过切换非玩家视角,我们移动到一个壁画前面,这个避免的名称为draw4。

第五步:点击属性面板右下角的“脚本”-新建,编辑poplang代码

5.png

注:使用了 . g 3 d c r e a t e t e x t i m a g e 生成了文字“ k e y i s M y S e c r e t ”的纹理图片( b a s e 64 编码),并保存在 v a l 中。最后使用 .g_html" title=3d>3d_create_text_image生成了文字“key is MySecret”的纹理图片(base64编码),并保存在val中。最后使用 html">.g3dcreatetextimage生成了文字keyisMySecret的纹理图片(base64编码),并保存在val中。最后使用.g_html" title=3d>3d_object_texture_image_set显示图片纹理。

第六步:启用玩家视角

6.png

注:在启动(自由视角)——玩家预览模式时,必须先在“视图-启用玩家视角”模式,否则并无法以玩家自由视角方式游览当前blender内嵌的展厅。并且无法完成点击交互事件等。

第七步:点击顶部菜单“启动(自由视角)”,进入xverse轻应用预览模式

7.png

注:我们看到,点击刚才的draw4的壁画,所有的壁画的纹理均被改变为“key is MySecret”,分析的原因为——这几个壁画全部采用了同一个纹理。故须先变更当前draw4的壁画的纹理和ID更新为其它。

第八步:暂停“自由视角”后,编辑draw4壁画的材质为MESHPHONGMATERIASH,并更新识别码(ID)

8.png

更新点击后,识别码ID会发生变化。

再次变更材质,恢复为“MESHSTANDARDMATERIASH”,并将贴图勾选(如下图所示)

html" title=3d>3d260ce37cd9a28133b4e00.jpeg" alt="9.png" />

注:可以看到,又显示原来的贴图了(但是识别码ID已经更新了)

第九步:再次启动(自由视角),进行xverse轻应用预览,点击显示“key is MySecret”正常

10.png

注:如上图所示,更新了识别码ID后的draw4壁画,已经可以实现点击单独点击文字纹理“key is MySecret”。

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

11.png

第十一步:将新的头榜标题设置为“3D纪念馆-密室逃脱”,点击右上角确认完成头榜发布

html" title=3d>3d26892ec28f63c2438cbaf7.jpeg" alt="12.png" />

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

13.png

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

第十三步:进入3D轻应用后,我们控制底中部的滚动玩控制玩家移动,使玩家视角正对着刚才的draw4壁画,点击它显示出“key is MySecret”

14.png

通过滚动玩移动玩家视角,最终进入到blender内嵌展厅内部(如下图所示)

15.png

移动至draw4壁画前方,点击它显示“key is MySecret”(如下图所示)

16.png

注:完整实现了密码的寻找过程(如用户不知道draw4才是最终可看到密码的摆件,则玩家需要慢慢查找线索,从而实现3D互动剧情:密室逃脱)

通过上述13步,我们成功完成了《乔布斯3D纪念馆》的飞碟形态的3D纪念馆的3D互动剧情的实现:密室逃脱。通过将密码或其它逃脱用的线索,分散在整个3D场馆中,可以实现渲染式的3D互动体验。通过简单的3D摆件的文字纹理或图片纹理贴图的动态切换,可交互式的显示出3D互动剧情的文字或图片线索。从而让玩家可以通过游玩整个3D馆的过程中,实现互动式的剧情。这大大提升了带个3D场馆的可玩性、趣味着。增强了互动内容的玩家体验特征。

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

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


http://www.ppmy.cn/server/49521.html

相关文章

网络命令大全windows linux

涉及到网络命令时,以下是一些常用的命令和它们的作用,这些命令可以在Windows命令提示符或者Unix/Linux终端中使用。这些命令有助于管理网络连接、解决网络问题以及进行网络诊断。 Windows 命令 ipconfig 显示本地计算机的网络配置信息,包括I…

react中useEffect函数的详细用法

1、函数介绍 useEffect 是 React 中的一个 Hook,用于在函数组件中处理副作用(如数据获取、订阅、手动更改 DOM 等)。与类组件中的生命周期方法(如 componentDidMount、componentDidUpdate 和 componentWillUnmount)类…

Linux | grep命令和 find命令有什么区别

如是我闻: 他们俩都是linux系统中具有查找功能的命令,但是grep 和 find 用于不同的目的。grep 用于在文件中查找文本模式,而 find 用于在文件系统中查找文件和目录。下面是它们的主要区别: grep 用途: grep 是用于在…

为什么选择Python作为AI开发语言

为什么Python适合AI 在当前的科技浪潮中,人工智能(AI)无疑是最热门的话题之一。无论是自动驾驶、智能推荐还是自然语言处理,AI都在不断改变我们的生活。而在这场技术革命中,Python作为主要的编程语言之一,…

MySQL Explain 关键字详解

概述 explain 关键字可以模拟执行 sql 查询语句,输出执行计划,分析查询语句的执行性能 使用方式如下:explain sql explain select * from t1执行计划各字段含义 1. id 如果 id 序号相同,从上往下执行如果 id 序号不同&#…

MySQL常见的命令

MySQL常见的命令 查看数据库(注意添加分号) show databases;进入到某个库 use 库; 例如:进入test use test;显示表格 show tables;直接展示某个库里面的表 show tables from 库; 例如:展示mysql中的表格 show tabl…

LabVIEW回热系统热经济性分析及故障诊断

开发了一种利用LabVIEW软件的电厂回热系统热经济性分析和故障诊断系统。该系统针对火电厂回热加热器进行优化,通过实时数据监控与分析,有效提高机组的经济性和安全性,同时降低能耗和维护成本。系统的实施大幅提升了火电厂运行的效率和可靠性&…

Elasticsearch-ES查询单字段去重

ES 语句 整体数据 GET wkl_test/_search {"query": {"match_all": {}} }结果: {"took" : 123,"timed_out" : false,"_shards" : {"total" : 1,"successful" : 1,"skipped" : 0…