Vue-3D-Model：用简单的方式来展示三维模型

最新推荐文章于 2024-06-02 09:32:17 发布
最新推荐文章于 2024-06-02 09:32:17 发布
阅读量1.7w 收藏 23
点赞数 2
分类专栏： js插件 文章标签： 3d模型 vue

这是一个用来展示三维模型的Vue组件，用最简单的方式在网页中展示三维模型，解决模型视角控制、鼠标事件等一系列问题。

找到这个插件源于一个客户的需求，要上传obj格式的三维模型，在网页中展示，当时跟客户说的是尽量实现，找到这个插件可是解了我的燃眉之急，感谢大神hujiulong。

原文地址：https://www.jianshu.com/p/c093ff00ea1b

注：插件基于vue，请先引用vue.js

陈悕
关注
  • 2
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Vue 3D Model 3D模型解析展示
zxhjd的博客
03-09 2103
【代码】Vue 3D Model 3D模型解析展示。
vue2怎么使用threejs展示Ready Player Me 提供的3D模型，并加载动画？
weixin_48373171的博客
09-05 700
我之前发表了一篇展示3d模型的，那个插件比较简单，但是不能加载模型动画，有需要的可以去看看：Vue项目中怎么展示3D模型（.glb文件）？_Single-Thread的博客-CSDN博客接下来要写的就是本文的重点，公司需要，不得不琢磨ready player me 官网：（直接复制粘贴到你的main.js文件中就行，😏）
vue-3d:基于vue+threejs的3d展示
05-08
vue-3d 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test 有关工作原理的详细说明，请查看的和。
探索三维新世界：Vue-3D-Loader —— 让Web端3D展示轻而易举
最新发布
gitblog_00095的博客
06-02 1341
探索三维新世界：Vue-3D-Loader —— 让Web端3D展示轻而易举 项目地址:https://gitcode.com/king2088/vue-3d-loader 在当今这个视觉体验至上的时代，3D展示已成为许多网站和应用提升用户体验的关键元素。Vue-3D-Loader，作为一个强大且灵活的Vue.js组件，它将Vue的优雅与Three.js的3D威力完美结合，为前端开发者开辟了一条通...
vue中展示3D模型 -- vue-3d-model
热门推荐
Rainy_X的博客
08-14 1万+
一、搜集到的网址 3D模型库 three.js WebGL babylonJS ThingJS EverAPI 3D数据可视化库 echarts — 基于Canvas Highcharts —基于SVG d3.js — 基于SVG/Canvas+SVG g2.js — 基于Canvas 二、需求 尝试使用three.js后发现上手不是特别快，后来发现了vue-3d-model组件，能够很简单的展示出3D模型 效果图如下 使用原因可看这篇文章 https://www.jianshu.com/p/
Vue展示3d模型
baby_cheerup的专栏
10-27 9609
背景需求：公司系统后台，需要在页面上显示设计师传入的3d模型，并修改3d模型的参数（主要是对应的mtl中的材质图片） 因目前项目是用vue-cli搭建的框架，对比了下网上的资料参考，最后选择了vue-3d-model。 最后调研选用obj,mtl搭配的形式，但这个有个弊端，在模型特别大的时候会显示不出来或加载特别慢，最近也是正在考虑如何嵌入3dmax 暂时还没有好的方案执行？？？？ 难点问题： 1.在引用3d模型，默认情况下，3d模型整体视觉效果暗淡无光，而且光度照不到的地方（底部和背面）是完全黑的
Vue中如何进行3D场景展示与交互（如Three.js）
程序猿徐师兄的博客
06-16 6018
Three.js是一个用于创建3D图形的JavaScript库。它基于WebGL技术，并提供了一系列的工具和API，使得开发者能够轻松创建3D场景，包括模型、纹理、光照、动画等。Three.js还提供了一个场景图形界面，使得开发者可以直观地构建3D场景。在Vue中使用Three.js，我们可以通过Vue组件的方式来创建3D场景，并将其嵌入到Vue应用中。在本文中，我们介绍了如何在Vue中使用Three.js来创建3D场景，并实现交互功能。通过添加光照和交互，我们可以让3D场景更加真实和生动。
vue-3d-model：:camera:vue.js 3D模型查看器组件
02-06
vue-3d模型 vue.js基于threejs的3D模型查看器组件，受启发一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适的大小并校正偏移，支持多种格式的模型。例安装使用npm npm install vue-3d-...
vue-3d-model-Vue组件中的3D模型查看器。-Vue.js开发
05-27
vue-3d-model vue.js 3D model viewer component, based on threejs, inspired by model-tag 一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，支持多种格式的模型。...
vue-3dmodel-viewer:[WIP] Vue的Three.js模型查看器
05-01
Three.js 是一个广泛使用的JavaScript库，用于在Web浏览器中创建和展示三维图形，它提供了丰富的功能，如光照、材质、动画和相机控制等，使得在Web上构建复杂的3D场景变得相对简单。 Vue.js 是一款轻量级的前端框架...
基于vue的三维模型加载插件
05-11
首先，Vue Model View是一个专门为Vue.js设计的插件，它允许在Web应用中方便地展示和交互三维模型。通过这个插件，开发者可以轻松地将3D模型集成到他们的Vue项目中，提供更丰富的用户体验。在描述中提到的安装过程，...
Vue使用vue-3d-model组件预览3D三维文件、立体文件，支持旋转、自动播放
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-01 4429
基于threeJS的vue 3D展示组件。
Vue项目中怎么展示3D模型（.glb文件）？
weixin_48373171的博客
08-17 2478
（在npm官网搜索可以找到），这两个插件默认展示的效果是一样的，也默认可以用鼠标控制模型旋转，但是缩放等一系列操作不能够满足，或许可以满足，只是我没仔细研究，重点来了，这个插件还是比较强的这个是npm地址，可以去看看详细信息使用方法：1.安装。
vue+threejs实现3D模型预览（包含模型缩放、平移、清晰度调整）
andrewtroye的博客
04-01 1765
因为最近工作需求涉及到threejs的开发，并且自己也一直想要学习和攻克这方面的知识，就通过自学之后记录下了这篇文章。这篇文章主要包含threejs的几个方面。
vue 使用 three.js 展示3D模型 gltf glb fbx
weixin_44382108的博客
09-08 1701
vue 使用 three.js 展示3D模型 gltf glb fbx
vue-3d-loader vue实现3d模型展示（vue2）
微风的博客
04-13 1992
【代码】vue-3d-loader vue实现3d模型展示（vue2）
vue3使用three.js引入3D模型文件
m0_56023096的博客
01-16 5136
模糊原因：原因是设备的物理像素分辨率与CSS像素分辨率的比值的问题，我们的canvas绘制出来后图片因为高清屏设备的影响，导致图片变大，然而我们在浏览器的渲染窗口并没有变大，因此图片会挤压缩放使得canvas画布会变得模糊。该值也可以被解释为像素大小的比例：即一个CSS像素的大小相对于一个物理像素的大小的比值。PerspectiveCamera(透视摄像机): 模拟人眼所看到的景象，物体的大小会受远近距离的影响，它是3D场景的渲染中使用得最普遍的投影模式。下载好后，解压，放进项目文件的public目录。
VUE3+ VITE 使用Three.js展示3D模型
Jayce_he的博客
05-11 2639
VUE3+ VITE 使用Three.js展示3D模型
Vue3 中实现 3D 可视化
Memento_mori1984的博客
07-11 1834
说明：spline实例既可以拉取模型同时拉取完毕之后会在canvas节点上渲染画布。loading prop true 显示 false 隐藏。纯展示类组件，只需要设计一个参数，显示隐藏。2- 导入loading根据状态控制显示。
vue-3d-model展示多个
06-09
要在Vue中展示多个3D模型，可以使用循环遍历的方式来动态生成多个`<vue-3d-model>`组件。例如，可以在Vue组件中定义一个数组，其中包含多个模型的URL地址。然后，在模板中使用`v-for`指令来循环遍历这个数组，生成多个`<vue-3d-model>`组件。 以下是一个示例代码： ```html <template> <div> <vue-3d-model v-for="(model, index) in models" :key="index" :obj-model="model"></vue-3d-model> </div> </template> <script> export default { data() { return { models: [ 'model1.obj', 'model2.obj', 'model3.obj' ] } } } </script> ``` 在上面的示例中，我们定义了一个`models`数组，其中包含3个模型的URL地址。然后，在模板中使用`v-for`指令来循环遍历这个数组，生成3个`<vue-3d-model>`组件。每个组件的`obj-model`属性都绑定到了对应的模型URL地址。这样，就可以在页面上动态展示多个3D模型了。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值