vue3 3D炫酷模型banner图

项目场景：

在官网首页展示3D炫酷动画模型，让整个模型都展示出来。

问题描述

主要是3D动画的展示效果，有些3d模型网站可以从51建模网站中获取。

案例代码：

<script setup>
import * as imgs from '../units/img'
import { onMounted, reactive, ref } from 'vue';
import { orderList, orderOtherList, teachersList, modelList } from '../units/img';
import MoveLeftTwo from '../components/MoveLeftTwo.vue';
import WordsListTwo from '../components/WordsListTwo.vue'
import ShowDialog from '../components/ShowDialog.vue'
import { ElScrollbar, ElLoading } from 'element-plus'import { vue3dLoader } from "vue-3d-loader";const lights = ref([{type: 'HemisphereLight',position: { x: 0, y: 1, z: 0 },skyColor: 0xffffff,// groundColor: 0xFF0000, // 此代码为灯光后颜色intensity: 1,
},
{type: 'DirectionalLight',position: { x: 1, y: 1, z: 1 },color: 0xffffff,intensity: .8,
}])
const scale = ref({ x: 1, y: 1, z: 0.2 })
const rotation = ref({x: 0,y: 0,z: 0,})
const onLoad = () => {rotate()
}
const rotate = () => {requestAnimationFrame(rotate());//实现自动旋转效果rotation.value.y += 0.001;
}
</script><template><div class="pageBoxs"><div class="contentModels"><h1 class="contentTitle">国内领先的3D互动展示平台</h1><p class="contentSubTitle">为创作者提供丰富的精品模型及<br/>强大的在线3D编辑展示引擎</p></div><div class="threeModels"><vue3dLoader style="height: 100vh;width:100%;" :showFps="false" :scale="scale" :rotation="rotation" :lights="lights"filePath="girls/scene.gltf" :backgroundAlpha="0" @load="onLoad" @process="process"></vue3dLoader></div></div>
</template>
<style scoped lang="less">
.pageBoxs {// border: 1px solid;height: 100vh;background: url(../assets/img/3d/bg.png) no-repeat;background-position: center;background-size: cover;position: relative;.contentModels {.contentTitle{position: absolute;top: 35%;left: 15%;font-size: 52px;font-weight: 400;}.contentSubTitle {position: absolute;left: 15%;top: 46%;font-size: 28px;line-height: 48px;width: 442px;}}.threeModels {position: absolute;height: 100vh;width: 50%;right: 0;display: flex;justify-content: center;}
}
</style>

收获

        可以从其它的网站中学习新的功能，让前端技能丰富起来。