【WEB前端2024】开源智体世界:乔布斯3D纪念馆-第32课-旋转动画

【WEB前端2024】开源智体世界:乔布斯3D纪念馆-第32课-旋转动画

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

下面分为几步介绍,如何基于dtns.network智体世界引擎如何实现乔布斯3D纪念馆的碟状总部的3D门组件的循环往复的旋转动画。这比上一节教程中的门的循环移动动画更进一步,即使用了poplang智体编程语言的旋转指令,实现了门的移动的循环往复运动的同时,实现了门组件的旋转动画。

旋转动画,可以实现3D场景中的特色的3D摆件的突出显示的效果。并且增强真实感、沉浸感。使得3D场馆更像一个真实的带着广告形象效果的3D真实平行宇宙世界空间。使用高级的智体编程语言poplang,可以简单的几行指令(就像是使用中文一样)就可以实现复杂的动画效果配置。并快速通过源文件的分享,使得社区用户可以快速的学习和使用、复制它(这个动画效果等等酷炫的3D智体应用)。

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

1.png

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

2.png

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

3.png

注:点击3D门组件,在右侧属性面板找到脚本-编辑按钮。

第四步:点击右侧的属性面板下方的脚本-编辑,进入poplang智体编程语言的脚本编辑器,使用全局函数g_3d_object_rotate指令实现3D组件的旋转特效

4.png

注:我们新增了rotate函数(其中使用了$.g_3d_object_rotate实现了旋转特效),将在onclicka函数中调用它,以便在移动的同时旋转3D门组件。

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

5.png

第六步:将新的头榜标题设置为“3D纪念馆-旋转动画”,点击右上角确认完成头榜发布

6.png

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

7.png

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

第八步:进入3D轻应用后,我们可以看到3D门组件正在以持续进行的状态进行往复运动,并且实现了“旋转”特效

8.png

接下来1秒,3D门组件将回正:

9.png

再接下来1秒,将实现门的下移(同时旋转):

10.png

通过上述8步,我们成功完成了《乔布斯3D纪念馆》的飞碟形态的3D纪念馆的门的3D组件的旋转动画特效。通过这个动画特效,我们很容易地理解了在3D场景里面,实现一个3D组件的旋转动画,将带来全新的真实感、沉浸感的互动体验,这个与2D的动画特效、电影情节、游戏完全不一样(可以自由的与之交互、互动,从不同的角度看到真实的动画模型的角度变化)。具备着类似真实世界一样的沉浸感、画面感,大大增强了用户的感观体验、互动体验。从而带来全新的3D动画特效体验。

注意:旋转动画也将构建重要的其它动画(例如骨骼动画,这在后面的教程中再使用到这个$.g_3d_object_rotate指令)。通过旋转,实现了人物形象的骨骼动画或者真实的3D形象动画。从而增加真实体、沉浸感,提升3D纪念馆的用户体验。

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/339508.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

某直聘zp_stoken纯算法还原

郑重声明:本项目的所有代码和相关文章, 仅用于经验技术交流分享,禁止将相关技术应用到不正当途径,因为滥用技术产生的风险与本人无关。 难点概要: 每日切换一次算法,其中包括环境,运行方式等。…

24.6.2(动态开点线段树)

星期一: cf edu round 36 E cf传送门 题意:1到n天初始全为工作日,有两种操作,将 l-r 区间变为 工作日/休息日,每次操作后询问剩余总工作日有多少 思路&…

前端调用接口有参数正常显示返回值,但是打印是undefined

前端调用接口有参数正常显示返回值,但是打印是undefined 这种有几种情况,但总的来说是因为我们做了接口拦截器的处理 一、后端返回code值有误 比如新来的后端忘记传code了。(按照公司规范,一般都是200成功码) 或者网上…

Oracle 序列-SEQUENCE

文章目录 序列-SEQUENCE创建序列访问序列序列的修改和删除查询序列信息 序列-SEQUENCE 创建序列 访问序列 序列的修改和删除 DROP SEQUENCE SEQ_EKPO;查询序列信息 可以通过视图 dba/all/user_sequences 查询序列的相关信息 SELECT SEQUENCE_NAME FROM DBA_SEQUENCES WHERE …

洪师傅代驾系统开发 支持公众号H5小程序APP 后端Java源码

代驾流程图 业务流程图 管理端设置 1、首页装修 2、师傅奖励配置 师傅注册后,可享受后台设置的新师傅可得的额外奖励; 例:A注册了师傅,新人奖励可享受3天,第一天的第一笔订单完成后可得正常佣金佣金*奖励比例 完成第二笔/第三笔后依次可得正常佣金佣金*奖励比例 完成的第四…

媳妇面试了一家公司,期望月薪20K,对方没多问就答应了,只要求3天内到岗,可我总觉得哪里不对劲。

“20k!明天就来上班吧!” 听到这句话,你会不会两眼放光,激动得差点跳起来? 朋友媳妇小丽,最近就经历了这样一场“梦幻面试”。然而,事情的发展却远没有想象中那么美好…… “这公司也太好了吧…

SpringBoot+百度地图+Mysql实现中国地图可视化

通过SpringBoot百度地图Mysql实现中国地图可视化 一、申请百度地图的ak值 进入百度开发者平台 编辑以下内容 然后申请成功 二、Springboot写一个接口 确保数据库里有数据 文件目录如下 1、配置application.properties文件 #访问端口号 server.port9090 # 数据库连接信息 spr…

移远通信携手高通,共启智能出行新时代

5月30-31日,2024高通汽车技术与合作峰会在无锡国际会议中心举行。作为高通“汽车朋友圈”的重要一员,移远通信应邀参会,展示了数十款基于高通平台打造的车载蜂窝通信模组、C-V2X模组、智能座舱模组、Wi-Fi/蓝牙模组,适配高通多个平…

揭秘:Java字符串对象的内存分布原理(二)

接上篇揭秘:Java字符串对象的内存分布原理 再看看下面几道关于String的真实面试题,看看你废不废? ② String str1 "Hello"; String str2 "He" "llo"; String str3 "He"; String str4 "l…

Github上一款开源、简洁、强大的任务管理工具:Condution

Condution 是一款开源任务管理工具,它以简洁易用、功能强大著称。它旨在为用户提供一个简单高效的平台,帮助他们管理日常任务、提高工作效率。 1. Condution 的诞生背景 现如今,市面上存在着许多任务管理软件,但它们往往价格昂贵…

C语言:学生成绩管理系统(含源代码)

一.功能 二.源代码 #include <stdio.h> #include <stdlib.h> #include <string.h> #define MAX_NUM 100 typedef struct {char no[30];char name[10];char sex[10];char phone[20];float cyuyan;float computer;float datastruct; } *student, student1;typ…

SQL Server定期收缩日志文件详细步骤——基于SQL Server 2012

SQL Server定期收缩日志文件详细步骤 一、环境配置1、查看数据库的属性2、文件设置3、备份模式4、查看收缩配置5、查看收缩选项 二、编写作业计划1、选择新建作业2、常规配置3、步骤4、输入内容5、脚本详解6、新建计划7、输入名称、选择执行时间8、查看测试9、查看测试结果 一、…

如何学习ai agent?

如何学习Agent&#xff0c;推荐阅读《动手做AI Agent》这本书。 推荐理由&#xff1a; 1&#xff1a;一本书能够全方位了解并探索Agent的奥秘&#xff01; &#xff08;1&#xff09;Agent的发展进程。 &#xff08;2&#xff09;可以帮我们做哪些事&#xff1a;自动办公&am…

COZE工作流超详细教程(胎教版)

前言 不知道有没有人和我一样喜欢经常收集一些好看的壁纸&#xff0c;但是有时候寻找的壁纸却总是差强人意。最近在学习COZE的时候搭建了一个自己的智能体通过工作流设计感觉还不错今天和大家分享分享。COZE的工作流界面友好&#xff0c;操作直观&#xff0c;即便是没有设计经…

6月2号训练(Codeforces Round 306 (Div. 2))(待补)

前言&#xff1a; 昨天晚上的训练&#xff0c;昨天下午刚刚打了百度的编程之星大赛&#xff0c;已经被题目橄榄了&#xff0c;榜上清一色的都是搞oi的中学生大佬&#xff0c;而我想了一下午也才只写了一道题&#xff0c;只能说路阻且长啊。晚上去洗了个澡&#xff0c;就没怎么认…

jmeter发送webserver请求和上传请求

有时候在项目中会遇到webserver接口和上传接口的请求&#xff0c;大致参考如下 一、发送webserver请求 先获取登录接口的token&#xff0c;再使用cookie管理器进行关联获取商品(webserver接口)&#xff0c;注意参数一般是写在消息体数据中&#xff0c;消息体有点像HTML格式 执…

算法工程师需要学习C++的哪些知识?

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「C的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;以下是算法工程师需要学习的一些…

输入a和b两个整数,按先大后小的顺序输出a和b(用指针变量处理)

解题思路&#xff1a; 定义两个&#xff08;int*&#xff09;型指针变量p1和p2&#xff0c;使它们分别指向a和b。使p1指向a和b中的大者&#xff0c;p2指向小者&#xff0c;顺序输出*p1,*p2就实现了按先大后小的顺序输出a和b。 编写程序&#xff1a; 运行结果&#xff1a; 程序…

coredns 被误删了,可以通过重新应用 coredns 的 Deployment 或 DaemonSet 配置文件来恢复

如果 coredns 被误删了&#xff0c;可以通过重新应用 coredns 的 Deployment 或 DaemonSet 配置文件来恢复。以下是恢复 coredns 的步骤&#xff1a; 1. 下载 coredns 配置文件 你可以从 Kubernetes 的官方 GitHub 仓库下载 coredns 的配置文件。以下是下载并应用配置文件的步…

计算机网络学习实践:模拟RIP动态路由

计算机网络学习实践&#xff1a;模拟RIP动态路由 模拟动态路由RIP协议 1.实验准备 实验环境&#xff1a;华为模拟器ENSP 实验设备&#xff1a; 3个路由器&#xff0c;3个二层交换机&#xff08;不是三层的&#xff09;&#xff0c;3个PC机 5个网段 192.168.1.0 255.255.…