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

        

需求

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 = truecurrentInfo.value = item
}const close3d = (item) => {item.visible = falsecurrentInfo.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>

收获

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/842582.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

字典推导式

字典推导式

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 使用字典推导式可以快速生成一个字典&#xff0c;它的表现形式和列表推导式类似。例如&#xff0c;我们可以使用下面的代码生成一个包含4个随机数的字…
阅读更多...
shell编程之面交互

shell编程之面交互

Here Document Here Document使用注意事项 面交互 面交互修改账号密码 [rootlocalhost opt]# passwd zhangsan <<EOF > abc1234 #下面两行是输入密码 > abc1234 > EOF 更改用户 zhangsan 的密码 。 新的 密码&#xff1a;无效的密码&#xff1a;…
阅读更多...
贝叶斯：共轭先验（conjugacy）

贝叶斯：共轭先验（conjugacy）

共轭先验与共轭分布 在贝叶斯统计中&#xff0c;如果后验分布与先验分布属于同类&#xff0c;则先验分布与后验分布被称为共轭分布&#xff0c;而先验分布被称为似然函数的共轭先验。&#xff08;要求后验分布与先验分布是同类分布&#xff0c;不要求似然函数分布相同。&#…
阅读更多...
红外超声波雷达测距

红外超声波雷达测距

文章目录 一HC-SR04介绍1HC-SR04简介及工作原理 二用HAL库实现HC-SR04测量距离1STM32CubeMX配置2keil53代码的添加 三效果 一HC-SR04介绍 1HC-SR04简介及工作原理 超声波是振动频率高于20kHz的机械波。它具有频率高、波长短、绕射现象小、方向性好、能够成为射线而定向传播等…
阅读更多...
二叉树尾部分

二叉树尾部分

1.二叉树的销毁 2.二叉树的层序遍历 3.判断二叉树是否为完全二叉树 4.二叉树的性质 1.二叉树的销毁 以后序的方式遍历销毁左右子数&#xff0c;因为前序和中序销毁的话根会被销毁而找不到左右子树的位置&#xff0c;后序的根访问在最后&#xff0c;可以找到左右的子树位置。…
阅读更多...
PHP深入理解-PHP架构布局

PHP深入理解-PHP架构布局

PHP的架构布局涉及多个层次&#xff0c;让我们一起探讨一下吧&#xff01;&#x1f680; 执行流程&#xff1a;解析为Token&#xff1a;将PHP代码解析成标记&#xff08;tokens&#xff09;。抽象语法树&#xff1a;将语法解析树转换为抽象语法树。Opcodes&#xff1a;将抽象语…
阅读更多...
RAG-GPT实践过程中遇到的挑战

RAG-GPT实践过程中遇到的挑战

引言 前面介绍了使用RAG-GPT和OpenAI快速搭建LangChain官网智能客服。有些场景&#xff0c;用户可能无法通过往外网访问OpenAI等云端LLM服务&#xff0c;或者由于数据隐私等安全问题&#xff0c;需要本地部署大模型。本文将介绍通过RAG-GPT和Ollama搭建智能客服。 RAG技术原理…
阅读更多...
强化学习_06_pytorch-PPO2实践(Humanoid-v4)

强化学习_06_pytorch-PPO2实践(Humanoid-v4)

一、PPO优化 PPO的简介和实践可以看笔者之前的文章 强化学习_06_pytorch-PPO实践(Pendulum-v1) 针对之前的PPO做了主要以下优化&#xff1a; -笔者-PPO笔者-PPO2refdata collectone episodeseveral episode(one batch)activationReLUTanhadv-compute-compute adv as one seri…
阅读更多...
CC1链补充-LazyMap

CC1链补充-LazyMap

前言 在我们上一篇中详细分析了CC1链&#xff0c;但是在CC1链中还有一条链就是LazyMap类 1.安装和CC1核心 环境安装的详情可以见上篇CC1分析的第二部分&#xff0c;环境搭建部分 两条不同的路线其实第一步核心都是相同的&#xff0c;执行类都是Tansformer接口和实现类&#…
阅读更多...
【MySQL事务（上）】

【MySQL事务（上）】

文章目录 前言一、什么是事务&#xff1f;1.关于事务的特性 二、为什么要有事务三、事务的提交方式测试事务准备工作事务的操作1.启动事务2.对事务进行回滚&#xff08;只有在事务进行期间&#xff09;3.提交事务&#xff08;持久化&#xff09;4.事务的异常情况结论 四、事务的…
阅读更多...
侧缝计怎么安装_测缝计安装方法介绍

侧缝计怎么安装_测缝计安装方法介绍

测缝计作为土木工程和结构健康监测中常用的仪器&#xff0c;用于测量裂缝或接缝的张开和闭合情况。正确的安装是确保测缝计能够准确、可靠地工作的关键。本文将详细介绍测缝计的安装方法&#xff0c;以确保测量结果的准确性和可靠性。 上传中 点击输入图片描述&#xff08;最多…
阅读更多...
Qt for android 串口库使用

Qt for android 串口库使用

简介 由于Qt for android并没有提供android的串口执行方案&#xff0c;基于需要又懒得自己去造轮子&#xff0c; 使用开源的 usb-serial-for-android 库进行串口访问读写。 如果有自己的需要和库不满足的点&#xff0c;可以查看库的底层调用的Android相关API C/C 串口库 对应…
阅读更多...
01Python相关基础学习

01Python相关基础学习

Python基础 模块相关导入模块sys模块 模块相关 导入模块 1. import 模块名 2. import 模块名 as 别名 3. from 模块名 import 成员名 as 别名sys模块 1. sys.argv 介绍: 实现从程序的外部想程序传递参数返回的是一个列表,第一个元素是程序文件名,第二个元素是程序外部传入的…
阅读更多...
RabbitMQ（一）概述第一个应用程序

RabbitMQ（一）概述第一个应用程序

文章目录 概述AMQP和JMS官网安装开始第一个程序 概述 消息队列是实现应用程序和应用程序之间通信的中间件产品 AMQP和JMS 工作体系 官网 https://www.rabbitmq.com/ RabbitMQ是一款基于AMQP、由Erlang语言开发的消息队列产品 安装 # 拉取镜像 docker pull rabbitmq:3.13-m…
阅读更多...
民国漫画杂志《时代漫画》第7期.PDF

民国漫画杂志《时代漫画》第7期.PDF

时代漫画07.PDF: https://url03.ctfile.com/f/1779803-1247458105-0a2c41?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps:资源来源网络&#xff01;
阅读更多...
Java进阶学习笔记23——API概述

Java进阶学习笔记23——API概述

API&#xff1a; API&#xff08;Application Programming Interface&#xff09;应用程序编程接口 就是Java帮我们写好了一些程序&#xff1a;如类、方法等等&#xff0c;我们直接拿过来用就可以解决一些问题。 为什么要学别人写好的程序&#xff1f; 不要重复造轮子。开发…
阅读更多...
哈希表详解及模拟实现（unordered_map）

哈希表详解及模拟实现（unordered_map）

目录 认识哈希表&#xff1a; 哈希冲突&#xff1a; 除留余数法--(常用) 平方取中法--(了解) 折叠法--(了解) 随机数法--(了解) 泛型编程&#xff1a; 闭散列&#xff1a; 线性探测&#xff1a; 二次探测&#xff1a; 扩容&#xff1a; 查找&#xff1a; 插入&#…
阅读更多...
PUBG绝地求生卡在初始界面 登不上去 打不开游戏的解决办法

PUBG绝地求生卡在初始界面 登不上去 打不开游戏的解决办法

PUBG绝地求生卡在初始界面 登不上去 打不开游戏的解决办法 吃鸡热潮依旧绝地求生PUBG可是咱们玩家的心头好啊&#xff01;不过有时候可能会遇到点小麻烦&#xff0c;比如PUBG绝地求生卡在初始界面 登不上去 打不开游戏的解决办法。小编这就给大家分享几个超实用的解决方法&…
阅读更多...
LDRA Testbed(TBrun)软件单元测试_操作指南

LDRA Testbed(TBrun)软件单元测试_操作指南

系列文章目录 LDRA Testbed软件静态分析_操作指南 LDRA Testbed软件静态分析_自动提取静态分析数据生成文档 LDRA Testbed软件静态分析_Jenkins持续集成_(1)自动进行静态分析的环境搭建 LDRA Testbed软件静态分析_Jenkins持续集成_(2)配置邮件自动发送静态分析结果 LDRA Testb…
阅读更多...
YOLOv10来了

YOLOv10来了

B站&#xff1a;啥都会一点的研究生公众号&#xff1a;啥都会一点的研究生 前言 YOLOv10 由清华大学研究人员在 Ultralytics版基础上进行进一步开发&#xff0c;引入了一种新的实时目标检测方法&#xff0c;解决了以前版本 YOLO 在后处理和模型架构方面的不足。通过消除非最大…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023