WebGL的3D框架比较 ThingJS 和 Three.js
随着flash的没落,浏览器的原生能力的兴起。在3D方面WebGL不管从功能还是性能方面都在逐渐加强。2D应用变为3D应用的需求也越来越强烈。 win10的画图板支持3D图片,2d工具photoshop也开始逐步集成了3D工具。
下面就基于WebGL技术探讨一下现在的两款3D框架。
Threejs(http://threejs.org/)
目前最流行的开源3D框架,2009年4月诞生,2005年adobe收购了macromedia的flash产品,2008,2009年正是flash如日中天之时,threejs也识时务的选择了flash的ActionScript平台,后来flash没落之后选择了WebGL。
ThingJS(http://thingjs.com/)
新兴的3D框架,2018年诞生,是针对物联网领域的JavaScript 3D Library。它是由在3D领域经营多年的优锘科技公司研发,旨在简化3D应用开发。
设计角度
WebGL可以处理3D图像,听起来是非常高兴的一件事,但是WebGL实在是太底层了,WebGl解决是如何再画布上画图的问题,怎么画点,线,面,怎么上色,怎么贴图,怎么处理光线,视角转动之后怎么换算绘制等等。这些对于一个做3D应用的开发者来说要学的东西太多了。
Threejs库的出现解决了底层的渲染细节和复杂的数据结构,终于将复杂的底层细节抽象出来,使得大家开发3d应用更容易了一些。和很多开发者交流threejs都是他们首次接触的WebGL 3D库,并能很容易的就能开始做一些实验。
但是使用Threejs开发应用还是门槛很高,但就一个加载模型,调光,选择模型弹框的功能,就能干出Threejs上百行代码。同时还有很多复杂的3D概念需要理解。
这时就需要ThingJS了。
ThingJS是更为上层的抽象,不用关心,渲染,mesh,光线等复杂概念。它抽象是一个个具体的模型,ThingJS封装了对模型交互事件的各种api,比如单击,左键,鼠标滑过等,ThingJS封装了对模型的操作,例如移动,放大缩小,上色,勾边,甚至开门,ThingJS还封装了模型的层次关系,例如物体是放在某个房间里的,房间又在某个楼层,楼层又是某个大楼的。大楼在园区里。
编码对比
这里仅仅从3D模型加载这个小点进行对比说明。更多内容大家可参考各自的网站www.three.org 和 www.thingjs.com进行详细对比。
three的模型加载
function load3DModel(){ / 1、collada是一种基于XML的3D模型交互方案,简单来说,就是一种3D模型可以通过collada转换成另一种3D模型, 从而,各种3D模型都可以通过collada转换成web支持的3D模型。 2、。dae是一个钟3D模型的格式 3、加载时注意浏览器同源策略的限制 / var loader = new THREE.ColladaLoader(); loader.load( "./model/avatar.dae", function ( collada ) { //找到模型中需要的对象。将相机看向这个对象是为了让这个对象显示在屏幕中心 collada.scene.traverse( function ( child ) { if ( child instanceof THREE.SkinnedMesh ) { modelObj = child; camera.lookAt( child.position ); } } ); //将模型的场景加入到整体的场景 modelObj.material.opacity = 0.8; scene.add( collada.scene ); //每个模型都要添加到场景 //显示出模型的骨骼的代码,不需要可删去 var helper = new THREE.SkeletonHelper( modelObj ); helper.material.linewidth = 3; scene.add( helper ); } ); }
threejs 加载模型到场景每个细节都得自己处理。
我们再来看下ThingJS的模型加载。
var app = new THING.App({ container: 'div3d', url: 'https://speech.uinnova.com/static/models/building' });
只关注场景再页面的div的id和场景存放的地址,所有的细节ThingJS都处理好了。
场景加载完之后便可从场景获得加载内容,并进行交互应用开发。
// 获取建筑对象 var building = app.buildings[0]; // 打印建筑中所有的楼层 building.floors.forEach(function(floor) { console.log('Floor: ' + floor.id); }); // 获取室外对象 var outdoors = app.outdoors; // 打印室外所有物体 outdoors.things.forEach(function(thing) { console.log('Thing: ' + thing.id); });
多么完美的封装方式。更多细节可以到www.thingjs.com查看
总结
three.js(www.three.org)和ThingJS(www.thingjs.com)都是JavaScript 3D Library,都对webGL的3D处理能力进行了封装,但是three.js 更偏三维技术底层,适用于3D爱好者学习3D技术;ThingJS更偏物联网应用功能开发,重在开发效率,降低开发成本,适合于使用3D技术做项目的开发者。
全文地址请点击:https://blog.csdn.net/liuwei000000/article/details/80623532?utm_source=copy
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
区块链开发公司 人工智能+区块链会有怎么样潜力?
目前的社会投资环境大致分为人工智能,区块链认真物联网。 “人工智能”这个术语最初是在1956年的DARTMOUTH协会创造出来的,由三个核心部分组成:算法,计算能力认真数据。从数据的角度来看,人工智能就像一种需要大量数据来“提升”的动物。区块链主链侧链开发(主链FBA算法渐近安全第一个可证明安全的共识算法低延迟、防止双花攻击 分散控制 去中心化程度高 符合工业4.0) 中心化和去中心化场内场外交易所开发 区块链跨境支付开发 区块链游戏开发 区块链供应链开发 配资软件开发(带三方支付)微信小程序开发 各行各业定制化软件 网络安全支持 .电话13986355479 微信15501162665. 区块链可以被认为是分布式数据,计算能力认真算法的资源集合。它结合了人工智能,区块链认真物联网等技术,并一个完整的数据驱动区块链项目生态系统,鼓励人们贡献数据认真技术。资源认真那末:区块链生态系统的优点在于它可以使用其他未使用的资源来完成原本不可能的交易,和还允许人们参原本无法访问的市场活动。从经济角度来看,它增加了现有资源的利用率。 我们试图将人工智能区块链结合起来,节油这种关系就像计算机认真互联...
- 下一篇
【云周刊】第190期:阿里云超算揭秘:虚拟机的心脏,物理机的肌肉
本期头条 阿里云超算揭秘:虚拟机的心脏,物理机的肌肉 在汽车行业,过去有一句俗话,一辆车从设计到下线,“至少要11辆真实碰撞试验”,今天,在现代化的汽车制造业,通过长期发展的设计和仿真软件,几乎所有的环节,都可以做到设计与仿真一体化的高性能计算实现,这一进步的背后需要依赖更强的并行计算集群和灵活的数据流动,以及实现复杂算法的工业仿真软件。2018杭州云栖大会主论坛上,阿里云高性能计算发布环节对比演示了风洞汽车模型实验和数字仿真风洞,吸引了现场以及线上众多观众的眼球。点击查看 饿了么国庆头三天外卖大数据:上万人在热门景点叫外卖 阿里巴巴提交允许“行政干预”的区块链专利申请 黄金周未来景区游客激增6倍,阿里巴巴数字经济体引领体验式消费升级 高盛重申对阿里买入评级,未来一年股价将增长逾50% 天猫国际进口消费翻倍,支付宝境外人均消费增三成 阿里集团孟
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- MySQL8.0.19开启GTID主从同步CentOS8
- Hadoop3单机部署,实现最简伪集群
- CentOS8编译安装MySQL8.0.19
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Mario游戏-低调大师作品