接上一篇：
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
