Vue-3D-Model：用简单的方式来展示三维模型
为什么做这个组件
我经常听到前端朋友们抱怨，在网页上展示三维模型太麻烦了。但是这方面的需求又有很多，例如做房地产的需要展示户型、卖汽车的需要展示汽车模型等。
在网页上展示三维模型就只能用WebGL技术了（别跟我说Flash和其他非标准插件啦），但是WebGL编程和JS区别太大，最好的方式大概是使用在WebGL基础上封装的库，例如three.js，但是three.js的学习成本也非常高，并且坑非常多。
所以我就开始做这个组件，目的只有一个：用最简单的方式来解决三维模型展示的需求
解决了哪些问题
当一个新手试图用three.js来展示一个模型（这一般是经过了数天的学习以后），他通常不会一开始就得到自己想要的结果。要么模型是一片黑色，或者模型根本就看不到。这里实际上有三个问题：
- 建模软件或软件配置的区别，导致模型尺寸的单位不统一，需要手动调节参数放大或者缩小
- 模型可能偏移了中心点，导致可视范围内看不到模型
- 没有给模型合适的光照
这些看似简单的问题实际上并不容易解决。即使解决了这些问题，还有更大的BOSS等着你：
你可能需要通过鼠标来旋转模型，或者通过滚轮来放大缩小。或者更进一步，你需要知道鼠标点击时，是否点中了模型，点中的是哪个部分。
这些都是听起来就很头疼的问题，要解决他们你至少需要有一定的图形学知识，或者对three.js的各种类了如指掌。
现在这些问题都被Vue-3D-Model解决了，如果你已经会使用vue（不会的话可以花几个小时学习一下），那么只需要短短几行代码就可以解决这些问题了:
<body>
<div id="app">
<model-obj src="static/model.obj"></model-obj>
</div>
<script src="vue.js"></script>
<script src="vue-3d-model.min.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
它会自动将模型以合适的大小显示出来，如果模型偏离了中心点也会自动校正。并且直接就可以通过鼠标来旋转和缩放了。这是一个在线的例子(墙内可能加载比较慢)：DEMO
当然，你也可以通过给组件传入参数来手动调节。更详细的使用方式可以在github上看到。
接下来要做的事
目前组件只支持OBJ格式以及three.js的JSON格式，后面马上就会支持dae、stl、fbx等格式的模型了。
文档和示例我也会找时间继续补充的，如果有问题或者其他需求，也可以来提issue。
作者：hujiulong
链接：https://www.jianshu.com/p/c093ff00ea1b
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
Vue-3D-Model：用简单的方式来展示三维模型的更多相关文章
- vue组件通信的几种方式
最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...
- vue.js最最最最简单实例
vue.js最最最最简单实例 一.总结 一句话总结: 1.vue.js实现实现数据的双向绑定用的是什么标记? 双大括号:比如{{message}} 2.vue数据循环输出的标记是什么? 用的是标签的v ...
- WPF 3D model - Sphere, Cone, and Cylinder
原文:WPF 3D model - Sphere, Cone, and Cylinder Extending Visual3D - Sphere, Cone, and Cylinder http: ...
- Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...
- 总结Vue第一天：简单介绍、基本常用知识、辅助函数
总结Vue第一天:简单介绍.基本常用知识.辅助函数 中文官网:https://cn.vuejs.org/v2/guide/syntax.html 遇到不熟悉的可以先看一下官网,然后再看一下一些别人写的 ...
- ShapeNet： An Information-Rich 3D Model Repository 阅读笔记
ShapeNet: An Information-Rich 3D Model Repository 注:本论文只是讲述数据库建立方法 摘要 ShapeNet是一个有丰富注释的大型形状存储库,由对象的3 ...
- java最简单的方式实现httpget和httppost请求
java实现httpget和httppost请求的方式多种多样,个人总结了一种最简单的方式,仅仅需几行代码,就能够完美的实现. 此处须要用到两个jar包,httpclient-4.3.1.jar.ht ...
- Make3D Convert your image into 3d model
Compiling and Running Make3D on your own computer source: http://make3d.cs.cornell.edu/code_linux.ht ...
- 以最简单的方式讲HashMap
以最简单的方式讲HashMap HashMap可以说是面试中最常出现的名词,这次头条的一面,第一个问的问题就是HashMap.所以就让我们来探讨下HashMap吧. 实验环境:JDK1.8 首先先 ...
随机推荐
- Mysql定时器定时删除表数据
由于测试环境有张日志表没定时2分钟程序就狂插数据,导致不到1一个月时间,这张日志表就占用了6.7G的空间,但是日志刷新较快,有些日志就没什么作用,就写了个定时器,定期删除这张表的数据 首先先查看mys ...
- TCP/IP基础总结性学习（2）
简单的HTTP协议 一.HTTP 协议用于客户端和服务器端之间的通信 客户端和服务器的定义:请求访问文本或图像等资源的一端称为客户端,而提供资源响应的一 端称为服务器端.在两台计算机之间使用 HTTP ...
- 曝郭盛华公司30万美元收购Acn.ai域名，揭秘人工智能布局下的巨头们
据域名投资人曝料,郭盛华公司已经提前拿下.ai短域名 Acn.ai,目前域名已经设置跳转到东联科技的官网.都说域名越短越值钱,而且搜索引擎都喜欢更短的域名,例如京东更换的域名“jd.com”交易价格约 ...
- java<T>泛型
泛型 1.泛型的概述 在JDK1.5之前,把对象放入到集合中,集合不会记住元素的类型,取出时,全都变成Object类型.泛型是jdk5引入的类型机制,就是将类型参数化,它是早在1999年就制定的jsr ...
- R中的常用命令（持续更新）
(1)工作环境 #Ctrl+L键:清屏#Ctrl+Shift+C键:注释.取消注释(仅在RStudio中)(可以多行) rm(变量) #清除某变量 ls() #列出内存中的变量 rm(list=ls( ...
- 【leetcode&CN&竞赛】1196.How Many Apples Can You Put into the Basket
题目如下: 楼下水果店正在促销,你打算买些苹果,arr[i] 表示第 i 个苹果的单位重量. 你有一个购物袋,最多可以装 5000 单位重量的东西,算一算,最多可以往购物袋里装入多少苹果. 示例 1: ...
- 对vue的solt的理解
//父 <children> <span>12345</span>//这边不会显示 </children> //子 components: { chil ...
- docker跨主机通信-overlay
使用consul 1,让两个网络环境下的容器互通,那么必然涉及到网络信息的同步,所以需要先配置一下consul. 直接运行下面命令.启动consul. docker run -d -p 8500:85 ...
- 常用深度学习框架(keras,pytorch.cntk,theano)conda 安装--未整理
版本查询 cpu tensorflow conda env list source activate tensorflow python import tensorflow as tf 和 tf.__ ...
- 如何用 Redis 统计独立用户访问量
众所周至,拼多多的待遇也是高的可怕,在挖人方面也是不遗余力,对于一些工作3年的开发,稍微优秀一点的,都给到30K的Offer,当然,拼多多加班也是出名的,一周上6天班是常态,每天工作时间基本都是超过1 ...