Vue实现前端3D展示及node环境搭建

最新推荐文章于 2024-05-15 02:20:25 发布
最新推荐文章于 2024-05-15 02:20:25 发布
阅读量3.8k 收藏 14
点赞数 3
分类专栏： 大创——Vue学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45749480/article/details/119778281
版权

目录

1.前端Vue的环境配置

1.1 通过cdn方式直接在js代码中引入Vue和Vue-3d-model（新手推荐使用）

1.2 整体的前端代码

1.3 效果

 2. 学习中遇到的bug

2.1  Failed to load resource: net::ERR_FAILED

2.2 解决办法：基于nodejs的http-server，以http的形式加载文件

 3. Vue及Vue-3d-model官方教程及下载：

最近参加的大创项目涉及到前端的3D模型展示，借此机会学习了Vue以及Vue-3d-model。记录下遇到的一些bug。

1.前端Vue的环境配置

1.1 通过cdn方式直接在js代码中引入Vue和Vue-3d-model（新手推荐使用）

<script src="https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

        在HTML文件中引入这两行代码后便可以使用。

1.2 整体的前端代码

这里为了方便就直接将模型文件与HTML文件放在了同一文件夹中。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8"></head>
<body>
  <div id="app">
    <model-obj src="LeePerrySmith.obj"></model-obj>
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js"></script>
<script>
  new Vue({ el: '#app' });
</script>
</body>

1.3 效果

 2. 学习中遇到的bug

由于第一次接触前端，所以在一些环境配置问题中遇到了一些不熟悉的bug和小麻烦。

2.1  Failed to load resource: net::ERR_FAILED

这时直接打开HTML文件浏览器一片空白。调出开发者工具发现有报错：

         这时由于浏览器跨域加载本地文件报错，有报错信息可以看出跨域请求只支持：http, data, chrome-extension, edge, https, chrome-untrusted。不支持文件形式。

2.2 解决办法：基于nodejs的http-server，以http的形式加载文件

1.安装node.js，直接去官网下载node中文网
2.使用npm/cnpm安装http-server；运行 npm install http-server -g
3.开始使用：cd到启动的静态项目目录，这里我的HTML以及模型文件在E盘。

4. 执行http-server/hs启动，结果显示如下

5. 此时在浏览器中访问http://127.0.0.1:8081 或 http://10.1.1.232:8081启动即可查看你想运行的代码。此时3d文件成功显示出来。

 3. Vue及Vue-3d-model官方教程及下载：

Vue：Vue官方教程

 

Vue-3d-model：Vue-3d-model下载

 

楠鱼上青天
关注
  • 3
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 中实现 3D 可视化
Memento_mori1984的博客
07-11 1779
说明：spline实例既可以拉取模型同时拉取完毕之后会在canvas节点上渲染画布。loading prop true 显示 false 隐藏。纯展示类组件，只需要设计一个参数，显示隐藏。2- 导入loading根据状态控制显示。
前端环境搭建+node.js+vue+vscode
08-21
前端环境搭建+node.js+vue+vscode 在本资源中，我们将学习如何搭建一个完整的前端环境，包括安装 Node.js、cnpm、浏览器、VSCode 和 Vue.js 等工具。 Node.js 的安装 Node.js 是一个基于 Chrome V8 JavaScript ...
vanta.js vue3 实现超酷炫3d页面
_K500的博客
04-23 1485
vanta.js + tree.js +vue3 实现3d页面。使用vanta.js 搭建酷炫3d网页。
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 有关工作原理的详细说明，请查看的和。
使用three.js在网页里展示3D模型
最新发布
m0_64889685的博客
05-15 1048
关于找较早的版本可以去下面链接中去获取,通过查找可以通过133的版本找到原生html可以使用的版本，像是GLTFLoader文件也可以通过在目录three.js-r133\examples\js\loaders中找到。现在有了内容当时图片并没有任何功能，一下代码是实现功能的部分主要的效果是视图飞行移动的效果，主要是通过判断鼠标的位置和3D模型视图里的位置是否重合来判断是否发生事件,左键为移动视图，右键为跳转链接。本篇本章是在vue框架下进行的网页搭建，使用原生版本也可以进行three.js的使用。
Vue中如何进行3D场景展示与交互（如Three.js）
程序猿徐师兄的博客
06-16 5940
Three.js是一个用于创建3D图形的JavaScript库。它基于WebGL技术，并提供了一系列的工具和API，使得开发者能够轻松创建3D场景，包括模型、纹理、光照、动画等。Three.js还提供了一个场景图形界面，使得开发者可以直观地构建3D场景。在Vue中使用Three.js，我们可以通过Vue组件的方式来创建3D场景，并将其嵌入到Vue应用中。在本文中，我们介绍了如何在Vue中使用Three.js来创建3D场景，并实现交互功能。通过添加光照和交互，我们可以让3D场景更加真实和生动。
【three.js】结合vue进行开发第一个3d页面
蜗牛~~
10-09 2614
如果我们想要不断的渲染，让它动起来，看到它不同方位的形状，需要调用渲染函数，如下所示。效果：由于我们设置的是从z轴看这个正方体，因此正对z轴看到的是平面。此时就完成了在vue中开发的一个简单的3d页面。回车后，依次输入项目名，选择vue和Js开发。新建一个项目目录，在集成终端打开，输入。将上面的静态渲染改为下面的旋转动画渲染。接下来我们开始安装three。然后安装依赖并运行项目。
VUE3+ThreeJs实现3D全景场景，可自由旋转视角
热门推荐
Etc.End的博客
11-17 1万+
是一个用于在Web上创建三维图形的JavaScript库。它可以用于创建各种类型的三维场景，包括游戏、虚拟现实、建筑和产品可视化等。three.js提供了许多功能和特性，包括3D渲染、光照、材质、几何形状、动画、交互和相机控制等。使用three.js，开发人员可以轻松地创建复杂的三维场景，使用户可以与这些场景进行交互，从而提供更好的用户体验。这个网站里面有很多免费的资源。每个资源里面都提供6个不同方位的图片。我们只需要通过threejs稍微处理一下，就能实现3d场景了。
webpack4手动搭建Vue开发环境实现todoList项目的方法
10-16
本文将详细介绍如何使用webpack4手动搭建Vue开发环境，以实现一个简单的todoList项目。首先，理解webpack的基础知识至关重要，它是现代前端项目中的一个模块打包工具，能够处理JavaScript、CSS、图片等资源，将其...
前端vue研发环境编码工具与环境
10-07
本文将详细介绍如何使用 VSCode（Visual Studio Code）作为编码工具，结合 Vue.js 和 Node.js 的环境搭建，以创建高效的前端研发环境。 首先，`VSCodeUserSetup-x64-1.45.0.exe` 是 Visual Studio Code 的安装程序...
Vue环境搭建说明文档+所有需要的软件
01-02
Vue.js 是一款流行的前端JavaScript框架，用于构建用户界面。它以其简单易学、灵活和高效的特点深受开发者喜爱。本文档将详细介绍如何为Vue项目搭建开发环境，特别针对初学者，旨在帮助你避免常见问题，确保顺利进行...
Vue.js开发环境快速搭建教程
10-20
通过以上步骤，你已经成功搭建了一个Vue.js的开发环境，可以开始编写Vue组件、实现功能并进行调试。随着对Vue.js的深入学习，你还可以探索Vuex（状态管理）、Vue Router（路由管理）以及其他插件和库，进一步提升...
Vue项目中怎么展示3D模型（.glb文件）？
weixin_48373171的博客
08-17 2335
（在npm官网搜索可以找到），这两个插件默认展示的效果是一样的，也默认可以用鼠标控制模型旋转，但是缩放等一系列操作不能够满足，或许可以满足，只是我没仔细研究，重点来了，这个插件还是比较强的这个是npm地址，可以去看看详细信息使用方法：1.安装。
Vue使用vue-3d-model组件预览3D三维文件、立体文件，支持旋转、自动播放
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-01 4322
基于threeJS的vue 3D展示组件。
Vue展示3d模型
baby_cheerup的专栏
10-27 9575
背景需求：公司系统后台，需要在页面上显示设计师传入的3d模型，并修改3d模型的参数（主要是对应的mtl中的材质图片） 因目前项目是用vue-cli搭建的框架，对比了下网上的资料参考，最后选择了vue-3d-model。 最后调研选用obj,mtl搭配的形式，但这个有个弊端，在模型特别大的时候会显示不出来或加载特别慢，最近也是正在考虑如何嵌入3dmax 暂时还没有好的方案执行？？？？ 难点问题： 1.在引用3d模型，默认情况下，3d模型整体视觉效果暗淡无光，而且光度照不到的地方（底部和背面）是完全黑的
Vue项目中使用Three.js开发三维IT机房
u012148903的博客
03-13 2057
为了便于访问和区分模型，需要对模型进行规范命名，如机房中的IT机柜都是按照cabinet-001、cabinet-002、cabinet-003 命名的。假设IT机柜的名称都是唯一的，那我们便可以基于这个名称从后端获取相应机柜的详细信息。GLTF 模型文件包含了整个场景的数据，比如几何体、材质、动画、相机等。在建模软件中，同一类型的模型文件可以放入一个数组里，数组可以多层嵌套。当前的机房模型比较简单，没有使用数组，所有的Mesh对象都是平展开的。简化模型，能用贴图表现的细节，就用贴图。建模和导出gltf。
vue基于threejs实现的3D可视化编辑器
CodingNoob
07-16 7819
随着5G网络的渐渐普及，物联网在人们的生活中渐渐广泛使用，社会向着越来越智能化的方向发展。当康科技经过不懈努力，研发属于自己的一款3D可视化编辑器，助力企业应用实现3D可视化服务。......
vue-3d-model设置
ydZ157的博客
12-14 1259
3d模型一面是亮的，另一面是黑的。由于没有设置灯光，导致模型渲染出来比较暗
vue3可视化项目——3D地图的使用
weixin_62639453的博客
02-14 1614
3D地图的使用，与二维地图大差不差，但是多了一点，我接着我在上一篇的基础上进行拓展。建议看完上篇再看这一篇。
前端 + vue胡静啦啦啦境配置
04-22
前端 + vue胡静啦啦啦境配置

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值