【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轻应用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关推荐
活宝小娜1 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点1 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow1 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o1 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic2 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā2 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年3 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder4 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727574 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart4 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter