vue2 引用3D模型

最新推荐文章于 2024-01-29 18:04:05 发布

Frontend-Arway

最新推荐文章于 2024-01-29 18:04:05 发布

阅读量286

点赞数 1

分类专栏： vue js npm 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_44939080/article/details/133853883

版权

js 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

vue

14 篇文章 0 订阅

订阅专栏

npm

8 篇文章 0 订阅

订阅专栏

一、首先安装对应的插件（前往查看model-viewer）

# install peer dependency ThreeJS
npm install three 
# install package
npm install @google/model-viewer

二、页面直接引用组件（例子）

<model-viewer style="width: 500px;height: 500px;margin: auto;" alt="Ready Player Me Avatar" camera-controls
src="https://cdn.glitch.com/36cb8393-65c6-408d-a538-055ada20431b/Astronaut.glb?1542147958948" shadow-intensity="1"
touch-action="pan-y">
</model-viewer>

import ModelViewer from '@google/model-viewer'   //引入组件
components: {
		ModelViewer
},

在这里插入图片描述

完事！就这么简单的使用方式

优惠劵

Frontend-Arway

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue2 引用3D模型

【代码】vue2 引用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 有关工作原理的详细说明，请查看的和。

modelviewer一个Web组件用于在Web和AR中轻松显示交互式3D模型

08-08

model-viewer：一个Web组件用于在Web和AR中轻松显示交互式3D模型！

参与评论您还未登录，请先登录后发表或查看评论

Vue2 使用 threejs 导入建模实现炫酷登录页

最新发布

add_ysd的博客

01-29

1202

本文讲介绍如何通过Vue2实现导入3D模型和小陨石飞行效果的登录页通过本篇文章你将会学习到1.vue ui 项目创建过程2.登录页面的实现3.路由拦截实现4.基础的threejs知识5.threejs如何导入3d建模6.threejs 如何实现动画效果。

web-3d-model-viewer:整合了 google-model-viewerWebGLThree.jsWASM 等一系列 3D 模型（STLOBJGLTFPLY）预览工具，便捷地进行模型预览、生成截图、计算拓扑信息。支持 Blender 进行模型压缩优化，提供了基于 Web 的简单 CAD 在线排版操作

04-29

@m-fe/react-model-viewer STL 3D 预览 · · Introduction 整合了 google-model-viewer 等一系列 3D 模型预览工具，便捷地进行模型预览、生成截图、计算拓扑信息。模板来自于。 Getting Started To get a local copy up and running follow these simple steps. Installation Install NPM packages npm install @m-fe/react-model-viewer # or yarn add @m-fe/react-model-viewer Usage GoogleModelViewer Add the <model> <script type

vue-3d-model：:camera:vue.js 3D模型查看器组件

02-06

vue-3d模型 vue.js基于threejs的3D模型查看器组件，受启发一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适的大小并校正偏移，支持多种格式的模型。例安装使用npm npm install vue-3d-model --save 或使用脚本标签供全球使用 < script src =" https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js " > </ script > 或下载并将其包含在您的html中用法 < template> < model-obj src = "

vue实现读取本地模型文件在线预览其动画

qq_23109373的博客

10-31

331

vue在线预览模型以及模型动画

Vue项目中怎么展示3D模型（.glb文件）？

weixin_48373171的博客

08-17

1904

（在npm官网搜索可以找到），这两个插件默认展示的效果是一样的，也默认可以用鼠标控制模型旋转，但是缩放等一系列操作不能够满足，或许可以满足，只是我没仔细研究，重点来了，这个插件还是比较强的这个是npm地址，可以去看看详细信息使用方法：1.安装。

vue2+three.js实现页面引入3d模型并进行简单模型控制

weixin_42477308的博客

05-13

3049

创建材质代码段解释：此时的方法是将一个图片转换为一个材质，并将该材质贴到3d电脑模型的屏幕上，（具体怎么精确贴到模型屏幕上，下面代码做有解释）例2：控制模型某一部位（如vr模型驾驶，点击车门，车门打开，进入查看驾驶室）可以在控制台打印出模型位置name，一般建模时会声明出来模型位置name。当拿到模型某一位置名字时，可以直接进行更换此位置颜色。此时就将上面所转换的图片精准的贴在模型的屏幕上。上面仅为自身理解，如有错误请大佬指正！七、渲染模型之后想进行控制模型的某一位置。五、创建场景、相机、地面、材质。

Three.js - JS三维模型库在Vue2中的基础教程

qq_57065653的博客

04-28

2447

官网 :https://threejs.org/ 案例: https://threejs.org/examples/#webgl_animation_keyframes

vue-3d-loader vue实现3d模型展示（vue2）

微风的博客

04-13

1771

【代码】vue-3d-loader vue实现3d模型展示（vue2）

vue2+vue-3d-loader 实现3D模型展示

qq_60533482的博客

11-24

2301

vue2+vue-3d-loader 实现3D模型展示

基于vue的三维模型加载插件

05-11

安装：npm install vue-model-view -S 组件安装：import ModelView from 'vue-model-view' Vue.use(ModelView)

vue-3dmodel-viewer:[WIP] Vue的Three.js模型查看器

05-01

[WIP] vue-3dmodel-viewer 概述基于THREE.js的Vue.JS 3D模型查看器组件，灵感来自和

vue three 加载 3D模型放大缩小旋转等操作

07-11

vue three 加载 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 input 只能输入数字且开头第一位数不能为0

阿威的博客

06-01

9239

vue input 只能输入数字且开头第一位数不能为0 HTML页面写一个@input事件 <template> <div class="orderpayment_number"> <div>购买数量:</div> <div> <input type="text" placeholder="输入购买数量" v-model="number" @input="handleInput" /> <

js数组过滤重复数据

阿威的博客

02-04

3780

js数组过滤重复数据 let arr = [1,2,3,4,4,1] let newArr = arr.reduce((pre,cur)=>{ if(!pre.includes(cur)){ return pre.concat(cur) }else{ return pre } },[]) console.log(newArr);// [1, 2, 3, 4]

微信小程序方法之间传参及api方法调用传参

阿威的博客

10-15

3295

点击aa、cc都会调用请求请求的时候传个参数在bb这个方法进行接收！ wxml <view bindtap="aa" data-value="1234567890">点击1</view> <text bindtap="cc" data-value="111111111">点击2</text> js aa(e){ this.bb(e) }, cc(e){ this.bb(e) }, bb(e){ console.

vue浏览器消息提示

阿威的博客

12-23

1723

vue浏览器消息提示判断浏览器是否支持浏览器消息弹窗 suportNotify() { if (window.Notification) { // 支持 console.log("支持" + "Web Notifications API"); //如果支持Web Notifications API，再判断浏览器是否支持弹出实例 this.showMess(event) } else {

vue引用three.js

11-09

在Vue中使用Three.js可以让我们更方便地创建3D场景和交互式应用程序。下面是在Vue中使用Three.js的基本步骤： 1. 安装Three.js：可以使用npm或yarn安装Three.js。 2. 引入Three.js：在Vue组件中引入Three.js库。 3. 创建场景、相机和渲染器：使用Three.js创建一个场景、相机和渲染器。 4. 添加3D对象：使用Three.js添加3D对象，例如几何体、网格、灯光等。 5. 渲染场景：使用Three.js渲染场景并显示在屏幕上。在Vue中使用Three.js还需要注意一些问题，例如如何处理纹理图片和模型加载问题，以及如何使用轨道控制器等。可以参考相关文档和示例代码来学习和实践。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交