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>

收获

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