vue-3d-loader 加载多个模型

0258

csdn推荐

需求

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版本，重新安装之后，需要将项目重新启动，这样整个页面才会渲染出来。自己一开始做时，未重新启动项目，导致页面一直未渲染出来。

代码案例


	

		

			

				

					
					

						
=0 && currentInfo.percentage 
							
						

						

							
								
							
						

					

				

				

					

						
						{{ item.username }}
					

					

						

							
									
								 {{ item.read }}
							
									
								{{ item.download }}
						

						

							{{ item.price }}
						

					

				

			

		

	



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
}


.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;
					}
				}
				
			}
		}
	}
}

收获

有时候，事情做不出来，不是因为技术问题；而是因为信息差。所以平时需要多了解一些其他的知识点，扩大视野，这样在需要时，可以快速的找到相关的知识点，再进行精细的处理。

我是资深前端之路，感觉这篇文章对你有帮助，记得【点赞】+【收藏】+【关注】。

文章来源:https://blog.csdn.net/weixin_44565776/article/details/139230919



微信扫描下方的二维码阅读本文

© 版权声明
1 本网站名称：凯尤木江博客圈
2 本站永久网址：blog.kaynak.top
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
未分类
# 模型# 开始# 渲染# 页面# 加载
喜欢就支持一下吧
点赞8 分享
admin的头像-凯尤木江博客圈钻石会员
【大模型】Ollama+open-webui/Anything LLM部署本地大模型构建RAG个人知识库教程（Mac）-凯尤木江博客圈
【大模型】Ollama+open-webui/Anything LLM部署本地大模型构建RAG个人知识库教程（Mac）
【大模型】Ollama+open-webui/Anything LLM部署本地大模型构建RAG个...
40天前 55
WordPress的子比zibll添加判断文章是否被百度收录,图文教程，本站亲测可用-凯尤木江博客圈
WordPress的子比zibll添加判断文章是否被百度收录,图文教程，本站亲测可用
WordPress的子比zibll添加判断文章是否被百度收录,图文教程，本站亲...
2个月前 55
在侧边栏添加一个动态时钟-凯尤木江博客圈
在侧边栏添加一个动态时钟
在侧边栏添加一个动态时钟
2个月前 53
【Vue3】使用v-model实现父子组件通信（常用在组件封装规范中）-凯尤木江博客圈
【Vue3】使用v-model实现父子组件通信（常用在组件封装规范中）
【Vue3】使用v-model实现父子组件通信（常用在组件封装规范中）
33天前 51
刚开始准备时，自己都蒙了，2年的功能测试让我的技术没有一丝的进步，提升的只有我的年龄…-凯尤木江博客圈
刚开始准备时，自己都蒙了，2年的功能测试让我的技术没有一丝的进步，提升的只有我的年龄…
刚开始准备时，自己都蒙了，2年的功能测试让我的技术没有一丝的进步...
51天前 51
吴恩达2022机器学习专项课程C2W3：2.25 理解方差和偏差（诊断方差偏差&正则化&偏差方案&搭建性能&学习曲线）-凯尤木江博客圈
吴恩达2022机器学习专项课程C2W3：2.25 理解方差和偏差（诊断方差偏差&正则化&偏差方案&搭建性能&学习曲线）
吴恩达2022机器学习专项课程C2W3：2.25 理解方差和偏差（诊断方差偏...
35天前 51
相关推荐
【大模型】Ollama+open-webui/Anything LLM部署本地大模型构建RAG个人知识库教程（Mac）-凯尤木江博客圈
【大模型】Ollama+open-webui/Anything LLM部署本地大模型构建RAG个人知识库教程（Mac）
【大模型】Ollama+open-webui/Anything LLM部署本地大模型构建RAG个人知识库教程（Mac）
40天前 55
在侧边栏添加一个动态时钟-凯尤木江博客圈
在侧边栏添加一个动态时钟
在侧边栏添加一个动态时钟
2个月前 53
国内镜像源网址-凯尤木江博客圈
国内镜像源网址
国内镜像源网址
29天前 51
分库分表场景下，如何设计与实现一种高效的分布式ID生成策略-凯尤木江博客圈
分库分表场景下，如何设计与实现一种高效的分布式ID生成策略
分库分表场景下，如何设计与实现一种高效的分布式ID生成策略
42天前 51
XTR115的最大电流是32mA.-凯尤木江博客圈
XTR115的最大电流是32mA.
XTR115的最大电流是32mA.
33天前 51
建造者模式-凯尤木江博客圈
建造者模式
建造者模式
22天前 51
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片

    暂无评论内容

搜索
开启精彩搜索