three.js如何实现简易3D机房?(二)模型加载的过渡动画

news/2024/4/24 13:14:57/文章来源:https://blog.csdn.net/weixin_48082900/article/details/136484413

接上一篇: 

three.js如何实现简易3D机房?(一)基础准备-下:http://t.csdnimg.cn/TTI1P

目录

六、自定义过渡动画

1.过渡动画组件 

2.模型加载时使用


根据模型大小,可以自定义模型加载的过渡动画效果,由于公司和本人设备配置有限,我这个模型才26M,打开都要至少加载一分钟。。。(大家配置高、网速快的当我没说)

六、自定义过渡动画

1.过渡动画组件 

在component/loading.vue文件中

<!--* @Description: 模型加载过渡动画* @FilePath: \hk-computerRoom-Security\src\views\home\component\loading.vue* @Date: 2024-02-02 15:29:56* @LastEditTime: 2024-02-02 15:55:12
-->
<template><div id="loading-mark" v-if="props.loading"><div class="loading-box"><div class="loading"><img src="../../../assets/images/home/threeD/loading.svg" /><div class="progress-txt">当前模型已加载 <b>{{ props.percentage }}</b> %</div><div class="loading-txt">模型文件首次加载时间较长请耐心等待.....</div></div></div></div>
</template>
<script setup lang="ts">
const props = defineProps({percentage: {type: Number,default: 0,},loading: {type: Boolean,default: false,},
});
</script>
<style scoped lang="scss">
#loading-mark {position: absolute;width: 100%;height: 100%;z-index: 2000;top: 0;right: 0;bottom: 0;left: 0;.loading-box {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;transition: opacity 0.3s;background-color: rgb(0 0 0 / 64%);.loading {width: 320px;height: 120px;text-align: center;}.progress-txt {font-size: 18px;font-weight: bold;color: #327cec;b {color: #9dadba;}}.loading-txt {margin-top: 10px;text-align: center;font-size: 14px;color: #327cec;font-weight: bold;}}
}
</style>
2.模型加载时使用

在index.vue中(css代码就不展示了哈)

在模型加载函数中,计算出模型实时加载进度即可,关键代码如下:

完整代码: 

// 导入模型
const importModel = () => {loader.load('model/room1.glb',(gltf: any) => {model = gltf.scene;model.rotation.set(0, -Math.PI / 12, 0);model.position.set(0, -5, 0);model.traverse(function (child: any) {if (child.isMesh) {// 1.去掉文字if (child.name == 'Text') child.visible = false;// 2.修复设备颜色偏暗的问题if (child.parent.name.includes('AU')) {child.frustumCulled = false;//模型阴影child.castShadow = true;//模型自发光child.material.emissive = child.material.color;child.material.emissive.setHSL(1, 0, 0.35);child.material.emissiveMap = child.material.map;}}});// create3DDialog();scene.add(model);},(xhr: any) => {// 计算加载进度百分比state.progress = Math.floor((xhr.loaded / xhr.total) * 100);if (state.progress == 100) state.loading = false;},// 模型加载错误(error: any) => {console.log(error, 'error');});
};

接下一篇:

three.js如何实现简易3D机房?(三)显示信息弹框/标签:http://t.csdnimg.cn/sXtjv

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

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

相关文章

Django Web架构:全面掌握Django模型字段(下)

Django Web架构 全面掌握Django模型字段&#xff08;下&#xff09; - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article…

item_fee-获得淘宝商品快递费用 API调用说明获取测试key

item_fee-获得淘宝商品快递费用 .通过传入商品id、区域id&#xff0c;来获取该商品的快递费用。 公共参数 点此获取API请求地址 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameString是API接口名称&a…

JavaScript基础4之原型的原型继承、原型链和理解对象的数据属性、访问器属性

JavaScript基础 原型原型继承问题解决 原型链isPrototypeOf()Object.getPrototypeOf() 理解对象数据属性访问器属性 原型 原型继承 继承是面向对象编程的另一个特征&#xff0c;通过继承进一步提升代码封装的程度&#xff0c;JavaScript中大多是借助原型对象实现继承的特性。…

按图搜索淘宝商品(拍立淘)

使用淘宝拍立淘接口的步骤通常包括&#xff1a; 注册成为淘宝开放平台的开发者&#xff1a;在淘宝开放平台网站上注册账号并完成认证。 创建应用以获取API密钥&#xff1a;在您的开发者控制台中创建一个应用&#xff0c;并获取用于API调用的密钥&#xff0c;如Client ID和Clie…

OpenHarmony教程指南—Ability的启动模式

介绍 本示例展示了在一个Stage模型中&#xff0c;实现standard、singleton、specified多种模式场景。 本实例参考开发指南 。 本实例需要使用aa工具 查看应用Ability 模式信息。 效果预览 使用说明 1、standard模式&#xff1a; 1&#xff09;进入首页&#xff0c;点击番茄…

FreeRTOS day2

使用ADC采样光敏电阻数值&#xff0c;如何根据这个数值调节LED灯亮度 总结DMA空闲中断接收数据的使用方法 首先要要选择串口然后配置串口的参数&#xff0c;配置MDA通道选择接受数据&#xff0c;配置空闲中断&#xff0c;定义一个数据接收的容器&#xff0c;启动MDA传输当串口…

学习大语言模型(LLM),从这里开始

在见识了ChatGPT的各种强大能力后&#xff0c;不少 NLP一线从业人员很自然地想到&#xff0c;以后开发者只要借助 ChatGPT&#xff0c;就可以做到现在大部分NLP工程师在做的事&#xff0c;比如文本分类、实体抽取、文本推理等。甚至随着大语言模型&#xff08;largelanguagemod…

力扣刷题Days11第二题--141. 环形链表(js)

目录 1,题目 2&#xff0c;代码 2.1快慢指针 2.2&#xff0c;哈希表 3&#xff0c;学习与总结 3.1自己尝试写快慢指针 反思 1,题目 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&…

时光机关:探秘Java中的Timer和TimerTask

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 时光机关&#xff1a;探秘Java中的Timer和TimerTask 前言Timer和TimerTask的基本概念Timer&#xff1a;TimerTask&#xff1a;为何它们是 Java 中任务调度的得力工具&#xff1a; Timer的使用方法创建…

python中的文件操作2

文件遍历 在Python中&#xff0c;遍历文件通常指的是逐行读取文件中的内容。这种方式对于处理大型文件特别有用&#xff0c;因为它不需要一次性将整个文件加载到内存中。下面是几种常见的遍历文件内容的方法&#xff1a; 1. 使用with语句和for循环 这是最推荐的方式&#xf…

appium解锁android真机系统的屏幕

在使用appium进行app自动化操作的过程中&#xff0c;经常遇到的第一个难题就是如何解锁系统屏幕&#xff0c;也就是亮屏解锁。 实际上解决办法如下&#xff1a;在desired_capabilities中增加两个参数unlockType和unlockKey&#xff0c;类似的示例代码如下&#xff1a; desire…

外包干了2年,技术退步明显

先说一下自己的情况&#xff0c;研究生&#xff0c;19年进入广州某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…

Stable Diffusion 模型分享:Realistic Stock Photo(真实的库存照片)

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八下载地址模型介绍

利用Python爬取高德地图全国地铁站点信息

利用Python中的requests库进行地铁站点信息的获取,同时将数据保存在本机excel中 # 首先引入所需要的包 import requests from bs4 import BeautifulSoup import pandas as pd import json# 发送 GET 请求获取网页内容 url http://map.amap.com/subway/index.html response r…

vue3页面内容切换(类似登录、注册内容切换)

一、内容描述 页面有俩块内容&#xff0c;分别是验证码登录页面内容&#xff0c;账号密码登录页面内容。有俩种处理方式&#xff0c;一个是写俩个页面跳转使用&#xff0c;还有一种是一个页面俩个内容&#xff0c;切换的只是不同的内容&#xff0c;相同的内容保留。一般都是选择…

比肩Gen-2,全新开源文生视频模型

著名开源平台Stability.ai在官网宣布&#xff0c;推出全新文生视频的扩散模型Stable Video Diffusion&#xff0c;已开源了该项目并公布了论文。 据悉&#xff0c;用户通过文本或图像就能生成高精准&#xff0c;14帧和25帧的短视频。目前&#xff0c;Stable Video Diffusion处…

【常见索引使用】⭐️Mysql中索引的类型以及使用方式和失效场景

目录 一、前言 二、数据准备 三、索引的分类 四、索引示例 示例1、主键索引&#xff08;Primary Key Index&#xff09;与 唯一索引&#xff08;Unique Index&#xff09; 示例2、前缀索引&#xff08;Prefix Index&#xff09; 示例3、联合索引&#xff08;复合索引&am…

Unity3D学习之XLua实践——背包系统

文章目录 1 前言2 新建工程导入必要资源2.1 AB包设置2.2 C# 脚本2.3 VSCode 的环境搭建 3 面板拼凑3.1 主面板拼凑3.2 背包面板拼凑3.3 格子复合组件拼凑3.4 常用类别名准备3.5 数据准备3.5.1 图集准备3.5.2 json3.5.3 打AB包 4 Lua读取json表及准备玩家数据5 主面板逻辑6 背包…

什么是工业协议网关?作用是什么?

在工业自动化和智能制造领域&#xff0c;数据的采集、传输和处理是实现设备监控、远程控制和优化的关键。而工业协议网关&#xff0c;作为连接工业设备与上层管理系统的桥梁&#xff0c;发挥着至关重要的作用。今天&#xff0c;我们就来深入解析一下HiWoo Box这一工业协议网关的…

【three.js】22. Imported Models导入模型

22. Imported Models导入模型 介绍 Three.js 可以让你创建很多原始几何体&#xff0c;但是当涉及到更复杂的形状时&#xff0c;我们最好使用专用的 3D 软件建模。 在本课中&#xff0c;我们将使用已经制作好的模型&#xff0c;但我们将在以后的课程中学习如何完全在 3D 软件中…