【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第41课-动态添加3D对象

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

【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第41课-动态添加3D对象

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

下面分为几步介绍,如何基于dtns.network智体世界引擎如何实现乔布斯3D纪念馆的碟状总部的3D对象组件动态添加功能。这个功能将用于后续的实时多人联机互动功能。并且可运用于实时接收后端数据、变更或添加3D场景。从而大大增强3D场馆的按需变化能力。提升3D场景的内容鲜活度和用户的真实沉浸感。

我们通过poplang代码的$.g_3d_object_add指令,实现了3D组件的动态添加。并且使用了ib3.toast来实现添加3D对象的返回结果的消息内容的提示。以方便我们进行高效的编程实现和调试。

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

1.png

注:找到标题为“3D纪念馆-订阅后端实时返回的数据”的xverse轻应用。

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

2.png

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

3.png

注:选中其中的右侧的精灵3D组件,以便导出3D物体的json代码。

第四步:顶部“文件”菜单选择“导出物体”

4.png

注:导出成功后,可看到游览器会下载一个*.json文件。打开它。复制它,修改它。然后使之变成一个json字符串(可使用json.cn或其它工具网站来实现“压缩”拍平json对象)

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

5.png

点击新建,然后编辑poplang代码(如下图)

6.png

注:我们定义了3D组件的onlcik函数(在里面使用了$.g_3d_object_add指令实现对json字符串3D组件对象的加载),并且使用了ib3.toast来实现加载是否成功的消息提醒。

第六步:顶部菜单“启动(自由视角)”进行xverse轻应用的预览

7.png

在启动(自由视角)——玩家预览模式后,点击中间的出生占柱子。成功添加新的3D对象(如下图所示)

8.png

注:我们成功添加了3D对象。

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

9.png

第八步:将新的头榜标题设置为“3D纪念馆-实时添加3D对象”,点击右上角确认完成头榜发布

10.png

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

11.png

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

第十步:进入3D轻应用后,我们控制底中部的滚动玩控制玩家移动,使得正对着刚才出生点3D柱子,点击它可出现新的3D精灵组件对象

12.png

注:可以看到中间会出现“添加物品:true”,并且在rtcodeid上方还会出现一个新添加的3D组件对象(运用得当,甚至会同步实时更新rtcodeid编码——须配置合适的3D组件name等)

通过上述10步,我们成功完成了《乔布斯3D纪念馆》的飞碟形态的3D纪念馆的实时添加3D组件对象功能。运用该功能,将为后续的多人联机互动,更前进一大步(可以动态地为3D场馆添加3D对象了)。

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

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

这篇关于【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第41课-动态添加3D对象的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

2025版mysql8.0.41 winx64 手动安装详细教程

《2025版mysql8.0.41winx64手动安装详细教程》本文指导Windows系统下MySQL安装配置,包含解压、设置环境变量、my.ini配置、初始化密码获取、服务安装与手动启动等步骤,... 目录一、下载安装包二、配置环境变量三、安装配置四、启动 mysql 服务,修改密码一、下载安装包安装地

go动态限制并发数量的实现示例

《go动态限制并发数量的实现示例》本文主要介绍了Go并发控制方法,通过带缓冲通道和第三方库实现并发数量限制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录带有缓冲大小的通道使用第三方库其他控制并发的方法因为go从语言层面支持并发,所以面试百分百会问到

Python Web框架Flask、Streamlit、FastAPI示例详解

《PythonWeb框架Flask、Streamlit、FastAPI示例详解》本文对比分析了Flask、Streamlit和FastAPI三大PythonWeb框架:Flask轻量灵活适合传统应用... 目录概述Flask详解Flask简介安装和基础配置核心概念路由和视图模板系统数据库集成实际示例Stre

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

Go语言数据库编程GORM 的基本使用详解

《Go语言数据库编程GORM的基本使用详解》GORM是Go语言流行的ORM框架,封装database/sql,支持自动迁移、关联、事务等,提供CRUD、条件查询、钩子函数、日志等功能,简化数据库操作... 目录一、安装与初始化1. 安装 GORM 及数据库驱动2. 建立数据库连接二、定义模型结构体三、自动迁

使用Python绘制3D堆叠条形图全解析

《使用Python绘制3D堆叠条形图全解析》在数据可视化的工具箱里,3D图表总能带来眼前一亮的效果,本文就来和大家聊聊如何使用Python实现绘制3D堆叠条形图,感兴趣的小伙伴可以了解下... 目录为什么选择 3D 堆叠条形图代码实现:从数据到 3D 世界的搭建核心代码逐行解析细节优化应用场景:3D 堆叠图

springboot如何通过http动态操作xxl-job任务

《springboot如何通过http动态操作xxl-job任务》:本文主要介绍springboot如何通过http动态操作xxl-job任务的问题,具有很好的参考价值,希望对大家有所帮助,如有错... 目录springboot通过http动态操作xxl-job任务一、maven依赖二、配置文件三、xxl-

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)