博客
关于我
轻松3D创业!ThingJS、Three.js和Unity 3D技术剖析帖
阅读量:167 次
发布时间:2019-02-28

本文共 2072 字,大约阅读时间需要 6 分钟。

游戏开发Unity 3D是比较有名气的平台,脚本文档保留着与JS相关的资料,JS何去何从?ThingJS、Three.js和Unity 3D彻底来剖析一下。

基于WebGL周边衍生了众多的第三方库,其中Three.js属于开发应用,做了一定的渲染细节封装,ThingJS则封装更多对模型的操作,力求让更多无3D开发经验的人员上手。以Unity 3D为代表的OpenGL出现更早,开发者可以在Unity 3D平台上构建各种AR和VR互动体验,同时可以发布WebGL版本。下面基于开发体验、场景资源和用户技能等三大维度比较这三款3D框架。

Three.js

目前最流行的开源3D框架,2009年4月诞生,2005年adobe收购了macromedia的flash产品,2008,2009年正是flash如日中天之时,threejs也识时务的选择了flash的ActionScript平台,后来flash没落之后选择了WebGL。

ThingJS

新兴的3D框架,2018年诞生,是针对物联网领域的JavaScript 3D Library。它是由在3D领域经营多年的优锘科技公司研发,旨在简化3D应用开发。

Unity3D

Unity是游戏引擎开发商,为游戏开发、美术、建筑、汽车设计、影视制作在内的创作者提供一整套软件解决方案,可用于创作、运营和变现实时互动的2D/3D内容。 2020年5月9日,Unity宣布收购加拿大技术服务公司Finger Food,拓展工业应用版图,在建筑设计、工程、施工等领域扩展。

以下是Three.js、ThingJS、Unity3D三个项目的基础情况。

在这里插入图片描述

1、 开发体验对比

Three.js是大多数开发者首次接触的WebGL 3D库,Threejs库的出现解决了底层的渲染细节和复杂的数据结构,终于将复杂的底层细节抽象出来。但对于初学者来说需要花费很多时间,就一个加载模型、调光、选择模型弹框的功能,就能写出Threejs上百行代码。

ThingJS是更为上层的抽象,不用关心渲染、mesh、光线等复杂概念。ThingJS封装了对模型交互事件的API、对模型的操作及层次关系,一个个具体的模型抽象把初学者从复杂的3D概念中解放出来。

Unity 3D需要下载和安装Unity编辑器以便创建3D项目,不同于Web前端开发JS语言,C#语言面向对象的特性完整,有利于程序设计。只是相对来说,C#语言学习成本更高。Unity 3D发布操作流程不够在这里插入图片描述

2、 场景资源对比

ThingJS考虑3D项目开发的便捷性,提供无需3D建模知识即可上手的场景搭建工具和无维护成本的场景存储云空间,模型库提供上万个行业模型资源。

Three.js和Unity 3D没有提供场景解决方案和模型库,需要团队手动维护,对于模型导出和加载有很高的要求。

在这里插入图片描述

3、 用户技能要求对比

ThingJS在线开发具备JS基础即可,不需要3D开发技能,入门时间仅数小时。

ThreeJS则需要学习很多复杂的3D概念,初学者上手需要花数周或更长时间,尤其需要专业美术人员完成建模和导出工作,团队协作成本高。
Unity 3D开发者需要有C#语言基础,具备3D开发专业知识,需要至少一周时间入门开发。
在这里插入图片描述

ThingJS主要优势在于入门简单、发布迅速,功能和设计更接近行业应用的需求,面向非专业3D用户提供的工具与资源,更适合物联网可视化应用。

Three.js底层引擎级别的三维图形库,有很多开源库对它进行扩展,但较为松散,适合做轻量级可视化应用,复杂应用则需要基于此库进行大量封装才行。

Unity 3D优势在于游戏开发,有很好的生态,性能效果都有很好表现,但输出结果较封闭,适合做最终用户的产品,不适合基于此做web上的二次开发。

为了体验3D便捷开发,我们再来看下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);});

ThingJS支持前端开发者,轻松着手可视化创业!

转载地址:http://ikcj.baihongyu.com/

你可能感兴趣的文章
NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_根据binlog实现update数据实时同步_实际操作05---大数据之Nifi工作笔记0044
查看>>
NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_根据binlog实现数据实时delete同步_实际操作04---大数据之Nifi工作笔记0043
查看>>
NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置binlog_使用处理器抓取binlog数据_实际操作01---大数据之Nifi工作笔记0040
查看>>
NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置数据路由_实现数据插入数据到目标数据库_实际操作03---大数据之Nifi工作笔记0042
查看>>
NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置数据路由_生成插入Sql语句_实际操作02---大数据之Nifi工作笔记0041
查看>>
NIFI从MySql中离线读取数据再导入到MySql中_03_来吧用NIFI实现_数据分页获取功能---大数据之Nifi工作笔记0038
查看>>
NIFI从MySql中离线读取数据再导入到MySql中_不带分页处理_01_QueryDatabaseTable获取数据_原0036---大数据之Nifi工作笔记0064
查看>>
NIFI从MySql中离线读取数据再导入到MySql中_无分页功能_02_转换数据_分割数据_提取JSON数据_替换拼接SQL_添加分页---大数据之Nifi工作笔记0037
查看>>
NIFI从Oracle11G同步数据到Mysql_亲测可用_解决数据重复_数据跟源表不一致的问题---大数据之Nifi工作笔记0065
查看>>
NIFI从PostGresql中离线读取数据再导入到MySql中_带有数据分页获取功能_不带分页不能用_NIFI资料太少了---大数据之Nifi工作笔记0039
查看>>
nifi使用过程-常见问题-以及入门总结---大数据之Nifi工作笔记0012
查看>>
NIFI分页获取Mysql数据_导入到Hbase中_并可通过phoenix客户端查询_含金量很高的一篇_搞了好久_实际操作05---大数据之Nifi工作笔记0045
查看>>
NIFI分页获取Postgresql数据到Hbase中_实际操作---大数据之Nifi工作笔记0049
查看>>
NIFI同步MySql数据_到SqlServer_错误_驱动程序无法通过使用安全套接字层(SSL)加密与SQL Server_Navicat连接SqlServer---大数据之Nifi工作笔记0047
查看>>
NIFI同步MySql数据源数据_到原始库hbase_同时对数据进行实时分析处理_同步到清洗库_实际操作06---大数据之Nifi工作笔记0046
查看>>
Nifi同步过程中报错create_time字段找不到_实际目标表和源表中没有这个字段---大数据之Nifi工作笔记0066
查看>>
【Flink】Flink 1.9 版本 web UI 突然没有日志
查看>>
NIFI大数据进阶_FlowFile拓扑_对FlowFile内容和属性的修改删除添加_介绍和描述_以及实际操作---大数据之Nifi工作笔记0023
查看>>
NIFI大数据进阶_FlowFile生成器_GenerateFlowFile处理器_ReplaceText处理器_处理器介绍_处理过程说明---大数据之Nifi工作笔记0019
查看>>
NIFI大数据进阶_FlowFile生成器_GenerateFlowFile处理器_ReplaceText处理器_实际操作---大数据之Nifi工作笔记0020
查看>>