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