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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
最新文章
- 如何优雅地使用Sublime Text
- Laravel 5.1 文档攻略 —— Eloquent:模型对象序列化
- Python缩小图像
- Quartus II9.0 使用中文输入的方法
- flume-ng 集群搭脚本
- 使用sysbench进行压力测试
- [AWS] Install the AWS cli
- Swift中的便利构造器和构造器链
- Codeforces 525E Anya and Cubes
- Socket与TcpClient的区别(转载)
- &;lt;&;lt;Python基础课程&;gt;&;gt;学习笔记 | 文章13章 | 数据库支持
- 利用flashBack恢复误删除(delete)的表数据
- Eclipse和debug的一些快捷键
- 在容器中利用Nginx-proxy实现多域名的自动反向代理、免费SSL证书
- js一些重点知识总结(一)
- 【MD5解密】免费帮大家解MD5
- oracle 删除外键约束 禁用约束 启用约束
- BZOJ 4517: [Sdoi2016]排列计数 [容斥原理]
- SpringCloud Hystrix
- 关于《common-net》的ftp上传
热门文章
- python的并发模块concurrent
- Q1:spring-boot中Controller路径无法被访问的问题
- for 循环,range()函数和导入模块
- SpringMVC @RequestMapping注解详解
- UI控件Telerik UI for WPF发布R2 2019|附下载
- 微信小程序-饮食日志_开发记录02
- jmeter使用jdbc获取注册验证码进行注册
- encode()和decode()两个函数
- 利用aspose-words直接将Word转化为图片
- web项目重启命令