vue中展示3D模型 -- vue-3d-model

一、搜集到的网址

3D模型库

three.js
WebGL
babylonJS
ThingJS
EverAPI

3D数据可视化库

echarts — 基于Canvas
Highcharts —基于SVG
d3.js — 基于SVG/Canvas+SVG
g2.js — 基于Canvas

vue组件 - vue-3d-model

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

二、需求

尝试使用three.js后发现上手不是特别快，后来发现了vue-3d-model组件，能够很简单的展示出3D模型
效果图如下

使用原因可看这篇文章
https://www.jianshu.com/p/c093ff00ea1b

更多栗子自行clone：https://github.com/hujiulong/vue-3d-model

三、如何使用

安装

npm install vue-3d-model --save

引入组件，可支持7种模型文件类型

model format	component tag
obj	`<model-obj>`
json	`<model-three>`
stl	`<model-st>`
dae	`<model-collada>`
ply	`<model-ply>`
fbx	`<model-fbx>`
gltf(2.0)	`<model-gltf>`

<template><div><model-obj src="static/models/obj/tree.obj" :width="600" :height="960"></model-obj><model-three src="static/models/json/scene.json"></model-three><model-obj src="static/models/obj/male02/male02.obj" mtl="static/models/obj/male02/male02.mtl"></model-obj><model-fbx src="static/models/fbx/dancing.fbx"></model-fbx><model-stl src="static/models/stl/slotted_disk.stl"></model-stl><model-collada src="static/models/collada/elf.dae"></model-collada><model-ply src="static/models/ply/slotted_disk.ply"></model-ply><model-gltf src="static/models/gltf/Duck/glTF/Duck.gltf"></model-gltf></div>
</template>
<script>
import {ModelObj,ModelThree,modelFbx,ModelCollada,ModelStl,ModelPly,ModelGltf
} from "vue-3d-model";
export default {components: {ModelObj,ModelThree,modelFbx,ModelCollada,ModelStl,ModelPly,ModelGltf},data() {return {};},mounted() {},methods: {}
};
</script><style scoped>
</style>

3.具体操作内容
vue-3d-model组件传送带

vue中展示3D模型 -- vue-3d-model相关推荐

vue 中展示PDF内容
vue 中展示PDF内容不久前有个需要改的需求,以前是直接根据链接让用户下载对应pdf文件来查看,最主要是给用户查看,然而这种并不是很安全的,其他用户可以进行下载或者使用pdf链接分享给其他人,所以 ...
Vue中路由管理器Vue Router使用介绍（三）
2019独角兽企业重金招聘Python工程师标准>>> 一.路由定义添加动态参数定义 1.路由定义项,使用:xx 方式定义动态参数 {path:'/user/:id/:name', ...
3d饼图 vue_在Vue中如何使用highCharts绘制3d饼图
本篇文章主要介绍了在Vue中使用highCharts绘制3d饼图的方法,现在分享给大家,也给大家做个参考. highcharts是国外知名基于javascript的图表库.由于中文官网的vue中使用h ...
vue中展示列表，类似formatter方法及在vue中点击页面信息事件
后台返回文件路径及文件名,前端展示只需要展示文件名,在Easyui中使用formatter方法很轻松就实现了,在vue中,需要使用过滤方式: formatterfj方法为截取字符串返回文件名该方法应 ...
vue中展示echarts中国地图
在vue项目中展示中国地图可以使用echarts库,根据配置数据区分不同颜色展示地图等功能. 先看效果一.安装Echarts npm install echarts@4.9.0 --save 我这里 ...
vue中展示mapbox地图
1,vue中安装mapbox cnpm i mapbox-gl -S 2,main.js中引入 import mapBoxGl from 'mapbox-gl' Vue.prototype.$mapb ...
什么是3D模型?学习3D游戏建模都需要掌握什么工具？
什么是3D模型 3D模型是物体的多边形表示,通常用计算机或者其它视频设备进行显示.显示的物体可以是现实世界的实体,也可以是虚构的物体.任何物理自然界存在的东西都可以用三维模型表示. 二.什么是游戏3D ...
Vue中使用百度地图Vue Baidu Map(vue-baidu-map)
最近负责的一个vue项目中需要调用百度地图api做标记打点的需求,记录一下: vue-baidu-map 官方地址一.插件的安装 1.npm 安装 $ npm install vue-baidu-m ...
vue中warning_5种处理Vue异常的方法
本文采用意译,版权归原作者所有去年一整年,我都在使用最爱的-Vue.js- 来做项目.最近突然意识到,我竟然从来没有认真去处理异常.我可以自恋地说:"我写的代码是完美的,没有BUG.&qu ...

vue中展示3D模型 -- vue-3d-model

一、搜集到的网址

二、需求

三、如何使用

vue中展示3D模型 -- vue-3d-model相关推荐

最新文章

热门文章