【WEB前端2024】开源智体世界:乔布斯3D纪念馆-第30课-门的移动动画
【WEB前端2024】开源智体世界:乔布斯3D纪念馆-第30课-门的移动动画
使用dtns.network德塔世界(开源的智体世界引擎),策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智体世界引擎(内嵌了three.js编辑器的定制版-支持以第一视角游览3D场馆),可以在浏览器和node.js、deno、electron上运行,它是一个跨平台的软件,支持多个操作系统使用!
下面分为几步介绍,如何基于dtns.network智体世界引擎如何实现乔布斯3D纪念馆的碟状总部的3D门组件的移动动画。这是首次实现的较为复杂的长动画效果。通过使用pop.sleep指令,结合3D组件的位置移动api,可以实现复杂的长时间动画。
长时动画特效,可以在3D场馆中,实现各种丰富的场景应用。例如3D教材,3D游戏、3D展厅、互动动画、互动教学、互动特效等。可以极大程度上丰富3D智体轻应用的用户体验效果,使之更具备真实感和沉浸感,让用户更容易沉浸在互动特效里。
第一步:打开头榜页面,找到3D纪念馆xverse轻应用
第二步:点击右上角…进入头榜编辑器
第三步:点击正面的“编辑xverse轻应用源码”,进入3D场馆编辑器
注:点击3D门组件,在右侧属性面板找到脚本-编辑按钮。
第四步:点击右侧的属性面板下方的脚本-编辑,进入poplang智体编程语言的脚本编辑器,使用时间函数pop.sleep实现长时3D动画特效
注:将pop.func.define定义的onclickx函数,修改为onclick(恢复3D门组件的点击事件,使得点击事件激活门的移动动画特效)。使用pop.sleep 1000实现1秒后3D门组件的位置发生一次位移(先右移),再在Y轴上加上3的偏移,连续上移2次——最终到达目标位置。如需更复杂的3D位移特效,可参考“快速游览全图”一文,亦是使用了pop.sleep实现了长时动画特效——只不过改变的是玩家位置、玩家视角。
第五步:点击顶部菜单“文件”推送头榜(作品),将此3D纪念馆分享给其他用户
第六步:将新的头榜标题设置为“3D纪念馆-门的移动动画”,点击右上角确认完成头榜发布
第七步:找到刚发布的xverse轻应用头榜,点击进入3D场景游览器
第八步:进入3D轻应用后,点击门3D组件,体验3D组件动画特效
注:点击圆圈位置的门3D组件。
第九步:点击门组件、激活了门的移动
我们从上图看到了门的位移,原来的位置上会出现一个点击事件带来的3D黄绿色3D方框(标注门原来点击事件发生的位置)
等待1-2秒后,最终门上移(2秒分2次完成上移,每次上移3),效果如下
通过上述9步,我们成功完成了《乔布斯3D纪念馆》的飞碟形态的3D纪念馆的门的3D组件的长时位移动画特效。通过这个动画特效,我们很容易地理解了在3D场景里面,实现一个3D组件的移动,将带来全新的沉浸式的互动体验,这个与2D的动画特效、电影情节、游戏完全不一样。具备着类似真实世界一样的沉浸感、画面感,大大增强了用户的感观体验、互动体验。从而带来全新的3D动画特效体验。
注:dtns.network德塔世界(开源的智体世界引擎)是在github和gitee上开源的项目!
相关文章:

【WEB前端2024】开源智体世界:乔布斯3D纪念馆-第30课-门的移动动画
【WEB前端2024】开源智体世界:乔布斯3D纪念馆-第30课-门的移动动画 使用dtns.network德塔世界(开源的智体世界引擎),策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智体世界引擎…...
智能化改造给企业带来的实际效果
1. 提高生产效率:通过自动化和智能化的生产线,减少人工操作,显著提升单位时间内的生产量。 2. 提升产品质量:智能化改造通过精确控制生产过程,减少人为错误,提高产品的一致性和可靠性。 3. 降低生产成本&am…...

深度学习-语言模型
深度学习-语言模型 统计语言模型神经网络语言模型语言模型的应用序列模型(Sequence Model)语言模型(Language Model)序列模型和语言模型的区别 语言模型(Language Model)是自然语言处理(NLP&…...

微型导轨在自动化制造中有哪些优势?
微型导轨在自动化制造中发挥重要作用,能够满足自动化设备制造中对精度要求较高的工艺环节。适用于自动装配线、自动检测设备和机器人操作等环节,推动了行业的进步与发展。那么,微型导轨在使用中有哪些优势呢? 1、精度高和稳定性强…...

探索气象数据的多维度三维可视化:PM2.5、风速与高度分析
探索气象数据的多维度可视化:PM2.5、风速与高度分析 摘要 在现代气象学中,数据可视化是理解复杂气象模式和趋势的关键工具。本文将介绍一种先进的数据可视化技术,它能够将PM2.5浓度、风速和高度等多维度数据以直观和动态的方式展现出来。 …...

【传知代码】双深度学习模型实现结直肠癌检测(论文复现)
前言:在医学领域,科技的进步一直是改变人类生活的关键驱动力之一。随着深度学习技术的不断发展,其在医学影像诊断领域的应用正日益受到关注。结直肠癌是一种常见但危害极大的恶性肿瘤,在早期发现和及时治疗方面具有重要意义。然而…...

平衡二叉树的应用举例
AVL 是一种自平衡二叉搜索树,其中任何节点的左右子树的高度之差不能超过 1。 AVL树的特点: 1、它遵循二叉搜索树的一般属性。 2、树的每个子树都是平衡的,即左右子树的高度之差最多为1。 3、当插入新节点时,树会自我平衡。因此…...

一键安装 HaloDB 之 Ansible for Halo
↑ 关注“少安事务所”公众号,欢迎⭐收藏,不错过精彩内容~ 前倾回顾 前面介绍了“光环”数据库的基本情况和安装办法。 哈喽,国产数据库!Halo DB! 三步走,Halo DB 安装指引 以及 HaloDB 的 Oracle 和 MySQL 兼容模式: …...
el-table的上下筛选功能
el-table的sort-change事件可以监听到筛选的事件; 会返回prop属性和order排序的顺序; html: <el-table :data"tableData" border style"width: 100%" :cell-style"{ textAlign: center }"header-cell-c…...
【手撕面试题】Vue(高频知识点一)
每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么&…...

LabVIEW车轮动平衡检测系统
LabVIEW车轮动平衡检测系统 随着汽车行业的快速发展,车轮动平衡问题对乘坐舒适性、操控稳定性及安全性的影响日益凸显,成为了提高汽车性能的一个关键环节。传统的检测系统因精度低、成本高、操作复杂等问题,难以满足现代汽车行业的需求。开发…...

【Python爬虫--scrapy+selenium框架】超详细的Python爬虫scrapy+selenium框架学习笔记(保姆级别的,非常详细)
六,selenium 想要下载PDF或者md格式的笔记请点击以下链接获取 python爬虫学习笔记点击我获取 Scrapyselenium详细学习笔记点我获取 Python超详细的学习笔记共21万字点我获取 1,下载配置 ## 安装: pip install selenium## 它与其他库不同…...

【Linux】Linux环境基础开发工具_3
文章目录 四、Linux环境基础开发工具2. vim3. gcc和g动静态库的理解 未完待续 四、Linux环境基础开发工具 2. vim vim 怎么批量化注释呢?最简单的方法就是在注释开头和结尾输入 /* 或 */ 。当然也可以使用快捷键: Ctrl v 按 hjkl 光标移动进行区域选择…...

数字水印 | 图像噪声攻击(高斯/椒盐/泊松/斑点)
目录 Noise Attack1 高斯噪声(Gaussian Noise)2 椒盐噪声(Salt and Pepper Noise)3 泊松噪声(Poisson Noise)4 斑点噪声(Speckle Noise)5 完整代码 参考博客:Python…...

LeetCode-47 全排列Ⅱ
LeetCode-47 全排列Ⅱ 题目描述解题思路代码说明 题目描述 给定一个可包含重复数字的序列 nums ,按任意顺序 返回所有不重复的全排列。 示例 : 输入:nums [1,1,2]输出: [[1,1,2], [1,2,1], [2,1,1]] b站题目解读讲的不好&…...

list 的实现
目录 list 结点类 结点类的构造函数 list的尾插尾删 list的头插头删 迭代器 运算符重载 --运算符重载 和! 运算符重载 * 和 -> 运算符重载 list 的insert list的erase list list实际上是一个带头双向循环链表,要实现list,则首先需要实现一个结点类,而一个结点需要…...
一个程序员的牢狱生涯(47)学法
星期一 学法 二铺不知道什么时候走到了我的身边,向我说道,这是二铺在我进来号子后主动过来和我说话。 我听到二铺这声突兀的说话后,抬起头。这时我才看到,除了二铺,还有六子、棍子都围在我的身边,看着我。虽然六子和棍子依旧一副‘吊儿郎当’的样子,但我从他们几个的眼神…...

微信小程序-页面导航
一、页面导航 页面导航指的是页面之间的相互跳转,例如:浏览器中实现页面导航的方式有如下两种: 1.<a>链接 2.location.href 二、小程序中实现页面导航的两种方式 1.声明式导航 在页面上声明一个<navigator>导航组件 通过点击…...
计算机网络- 特定服务类型(Type of Service, TOS) 服务质量(Quality of Service, QoS)
特定服务类型(Type of Service, TOS) 具有特定服务类型(Type of Service, TOS)的数据包是指在IP头部中包含特定TOS字段设置的数据包。TOS字段用于指示数据包的服务质量要求,如延迟、吞吐量、可靠性等。现代IP网络通常…...

2.6 Docker部署多个前端项目
2.6 Docker部署多个项目 三. 部署前端项目 1.将前端项目打包到同一目录下(tcm-ui) 2. 部署nginx容器 docker run --namenginx -p 9090:9090 -p 9091:9091 -d nginx3. 复制nginx.conf文件到主机目录 docker cp nginx:/etc/nginx/nginx.conf /root/ja…...

铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器,其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机(Virtual Host)。 1. 简介 Nginx 使用 server_name 指令来确定…...
【AI学习】三、AI算法中的向量
在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...
反射获取方法和属性
Java反射获取方法 在Java中,反射(Reflection)是一种强大的机制,允许程序在运行时访问和操作类的内部属性和方法。通过反射,可以动态地创建对象、调用方法、改变属性值,这在很多Java框架中如Spring和Hiberna…...

微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制
目录 节点的功能承载层(GATT/Adv)局限性: 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能,如 Configuration …...

图解JavaScript原型:原型链及其分析 | JavaScript图解
忽略该图的细节(如内存地址值没有用二进制) 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么:保存在堆中一块区域,同时在栈中有一块区域保存其在堆中的地址(也就是我们通常说的该变量指向谁&…...
js 设置3秒后执行
如何在JavaScript中延迟3秒执行操作 在JavaScript中,要设置一个操作在指定延迟后(例如3秒)执行,可以使用 setTimeout 函数。setTimeout 是JavaScript的核心计时器方法,它接受两个参数: 要执行的函数&…...

MeshGPT 笔记
[2311.15475] MeshGPT: Generating Triangle Meshes with Decoder-Only Transformers https://library.scholarcy.com/try 真正意义上的AI生成三维模型MESHGPT来袭!_哔哩哔哩_bilibili GitHub - lucidrains/meshgpt-pytorch: Implementation of MeshGPT, SOTA Me…...