3D应用开发:UnitythreejsThingJS还是CesiumJS?

Posted 空间8度

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了3D应用开发:UnitythreejsThingJS还是CesiumJS?相关的知识,希望对你有一定的参考价值。


随着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进行详细对比。

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'});
 // 获取建筑对象 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); });

Unity3D

Unity3D是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。Unity类似于Director,Blender game engine, Virtools 或 Torque Game Builder等利用交互的图型化开发环境为首要方式的软件。其编辑器可运行在Windows、Linux(目前仅支持Ubuntu和Centos发行版)、Mac OS X下,可发布游戏至Windows、Mac、Wii、iPhone、WebGL(需要html5)、Windows phone 8和android平台。也可以利用Unity web player插件发布网页游戏,支持Mac和Windows的网页浏览。它的网页播放器也被Mac 所支持。
CesiumJS
 Cesiumjs 是一套javascript库,用来渲染3D地球,2D区域地图,和多种GIS要素。不需要安装任何插件就能在支持最新HTML5标准的浏览器上运行。支持WebGL硬件加速,非常适合动态数据在GIS图层上的展示,是一个跨平台,开源,非常有前途的webgis表现层库。 Cesiumjs源自 Analytical Graphics, Inc. (AGI) 公司为他们客户开发一个虚拟地球项目,后来将cesium项目贡献给开源社区并一直活跃开发中。 (AGI 开发的 STK Terrain Server 是一种针对Cesium-应用的流式高分辨率服务器)另一个公司级的贡献者是NICTA (National ICT Australia) 澳大利亚最大的信息与通讯技术中心,NICTA的员工们贡献了瓦片地图服务、地形处理等cesium的核心功能。 并一直使用cesium开发环境监测分析、交通基础设施建模仿真优化等领域的应用。

总结

    three.js、ThingJS以及CesiumJS都是JavaScript 3D Library,都对webGL的3D处理能力进行了封装,但是three.js 更偏三维技术底层,适用于3D爱好者学习3D技术;ThingJS更偏物联网应用功能开发,CeiusmJS则更偏向GIS应用,两则都重在开发效率,降低开发成本,适合于使用3D技术做项目的开发者。unity则更偏向于3D游戏,其中unity和three.js偏向于底层,

如果在没有什么类似项目经验积累的情况下,用Unity、threejs等工具,从构建一个场景展示开始、到创建物联网设备、再到推送数据、显示数据信息等等,这个过程需要花费很大的学习和构建成本。比如,首先面临要考虑的就是场景如何来、设备的模型如何来、之后还要考虑如何控制他们、如何解决性能问题,这都需要较高的3D专业知识,需要深入很多细节才行,当然也就更灵活。ThingJS和CesiumJS都是对这些问题进行了高度的封装,更加偏向于行业应用,让程序员更加聚焦他关心的业务逻辑,而非专业知识 —— 这也是很多工具库的价值所在; 所以, 无论是ThreeJS、ThingJS、CesiumJS还是Unity,都有各自的优缺点,没有最好,选择合适的就是最好的。


以上是关于3D应用开发:UnitythreejsThingJS还是CesiumJS?的主要内容,如果未能解决你的问题,请参考以下文章

WPF 3D 小小小小引擎 - ·WPF 3D变换应用

Fomo3d区块链游戏开发

3D应用开发:UnitythreejsThingJS还是CesiumJS?

用Unity3d开发游戏的优点有哪些

用Unity3D 开发游戏哪种语言最好

下面的3d 照片墙用WPF应该怎么开发