需求
1、在使用three.js进行开发的过程中，需要列表加载多个模型，并根据需要多模型进行加载。
2、当鼠标移动到图片上去的时候，开始加载模型， 模型进行加载和展示。
3、在制作3d沉浸式商城时，需要根据需求，在页面将多个不同的模型展示出来。
遇到的问题
1、在鼠标移动到图片上时，开始加载模型；当鼠标移出图片时，显示图片。
2、按照需求加载，根据当前的需求，进行显示对应的模型。不需要时，不会加载模型。
3、3d模型不能用v-show进行预先加载，需要用v-if进行渲染，比较消耗性能。
4、大模型文件时，模型加载的时间会比较长；建议在列表页面渲染时，准备的都是size比较小的模型，可以在模型中加入一定的动画，这样这个页面渲染的效果更好。
5、一开始在制作时，没有什么思路；首先考虑的是three.js进行加载，这样需要自己进行封装；最后多找资料，使用vue-3d-model，发现没做出来；最后才选用vue-3d-model。
6、在使用vue-3d-loader时，需要注意版本；vue2使用1.0版本；vue3使用2.0版本，重新安装之后，需要将项目重新启动，这样整个页面才会渲染出来。自己一开始做时，未重新启动项目，导致页面一直未渲染出来。
代码案例
<template>
<main class="pageBox">
<div class="goodsBox">
<div class="goodsItem" v-for="(item, index) in goodsLists" :key="item.id" @click="load3d(item)">
<div class="goodsImg" @mouseover="show3d(item)" @mouseleave="close3d(item)">
<img src="../assets/img/3d/car1.png" alt="" class="iconImg" v-if="!item.visible">
<div v-else>
<div class="progress" v-if="currentInfo.percentage >=0 && currentInfo.percentage <= 99">
<el-progress :percentage="currentInfo.percentage" color="#0256FF" :show-text="false" />
</div>
<div >
<KeepAlive>
<vue3dLoader style="height: 120px;width:100%;" :showFps="false" :scale="scale"
:rotation="rotation" :lights="lights" filePath="robot.glb" :backgroundAlpha="0"
@load="onLoad" @process="process"></vue3dLoader>
</KeepAlive>
</div>
</div>
</div>
<div class="goodsContents">
<div class="goodsUser">
<img src="../assets/img/3d/car1.png" alt="" class="iconUser">
<span>{{ item.username }}</span>
</div>
<div class="goodsData">
<div class="goodsRead">
<span><el-icon>
<Reading />
</el-icon> {{ item.read }}</span>
<span><el-icon>
<Download />
</el-icon>{{ item.download }}</span>
</div>
<div class="goodsPrice">
{{ item.price }}
</div>
</div>
</div>
</div>
</div>
</main>
</template>
<script setup>
import { ref } from 'vue'
import { Download, Reading } from '@element-plus/icons-vue'
import { vue3dLoader } from "vue-3d-loader";
const goodsLists = ref([
{ id: 1, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 2, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 3, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 4, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 5, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 6, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 7, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 8, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 9, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 10, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 11, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 12, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 13, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 14, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 15, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 16, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 17, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 18, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 19, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 20, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 21, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 22, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 23, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 24, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 25, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 26, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 27, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 28, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 29, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 31, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
{ id: 32, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },
])
const currentInfo = ref({ id: 3, name: '汽车模型', username: '三维模型@供应商', avatar: '', percentage: 0, visible: false, read: 10, download: 200, price: "69.90" },)
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.5, y: 1.5, z: 1.3 })
const rotation = ref({
x: 0,
y: 0,
z: 0,
})
const process = (event, fileIndex) => {
currentInfo.value.percentage = ((event.loaded / event.total).toFixed(2)) * 100;
}
const onLoad = () => {
rotate()
}
const rotate = () => {
requestAnimationFrame(rotate);//实现自动旋转效果
rotation.value.y += 0.001;
}
const show3d = (item) => {
item.visible = true
currentInfo.value = item
}
const close3d = (item) => {
item.visible = false
currentInfo.value = item
}
</script>
<style lang="less" scoped>
.pageBox {
.goodsBox {
display: flex;
flex-wrap: wrap;
align-items: center;
.goodsItem {
width: 25%;
padding: 10px;
// border: 1px solid;
// background: green;
border-radius: 10px;
position: relative;
.goodsImg {
width: 100%;
height: 122px;
position: relative;
.iconImg {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 10px;
}
.progress {
position: absolute;
width: 100%;
bottom: 10px;
left: 0;
// border: 1px solid;
}
}
.goodsContents {
// border: 1px solid;
padding: 10px;
position: relative;
.goodsUser {
// border: 1px solid;
display: flex;
align-items: center;
gap: 10px;
.iconUser {
height: 2.5rem;
width: 2.5rem;
border-radius: 2.5rem;
}
}
.goodsData {
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
// border: 1px solid;
.goodsRead {
display: flex;
gap: 10px;
align-items: center;
span {
display: flex;
gap: 5px;
align-items: center;
}
}
.goodsPrice {
color: #ff901d;
font-size: 14px;
}
}
}
}
}
}
</style>
收获
有时候，事情做不出来，不是因为技术问题；而是因为信息差。所以平时需要多了解一些其他的知识点，扩大视野，这样在需要时，可以快速的找到相关的知识点，再进行精细的处理。
我是资深前端之路，感觉这篇文章对你有帮助，记得【点赞】+【收藏】+【关注】。
