本文目录一览：
- 1、cesium 和 Three.js有什么区别，以及二者与WebGL 的关系
- 2、three.js vs ThingJS：全景虚拟漫游技术实现？Javascript 3D开发 前端 物联网 三维建模 3D模型
- 3、前端dxf文件结构
- 4、three..js在渲染方面支持的怎么样
cesium 和 Three.js有什么区别，以及二者与WebGL 的关系
二者都是基于WebGL技术开发的js库
Threejs受众面比较广，是封装了webgl的一些底层用法，让初学者更容易上手；例如绘制一个立方体，使用webgl原生api可能要写50行代码，包括构建坐标点，顶点组织、着色器等信息；在threejs里面可能只要一句代码就可以构建(实际上也是调用webgl原生api)，只是做了更大粒度的封装
Cesium受众面相对较小，是Gis相关的，也是基于WebGL开发的，它主要是三维地球相关的js库，可以展示二维地图服务(百度高德)、倾斜摄影模型；还可以在上面做一些三维分析，可以参考
three.js vs ThingJS：全景虚拟漫游技术实现？Javascript 3D开发 前端 物联网 三维建模 3D模型
三维建模无非就是通过专业技能加工成立体图形，使之图形成为直观、易懂，容易判读的立体图件。对于开发者来说，选择一个好的3D开发框架，在全景虚拟漫游场景上实现3D动效，ThingJS vs three.js开发性能和资源投入这里拿来比较一下，希望对你有帮助。
1~three.js优势
Three.js是大多数开发者首次接触的WebGL 3D库，Threejs库的出现解决了底层的渲染细节和复杂的数据结构，可以支持如一个房间级别,或一个楼层级别的渲染,或符合特殊要求的大量同类模型的渲染。
2~three.js开发性能
对 WebGL进行了封装,提供了更高层的渲染接口,提供摄影机、视口的控制,提供场景组织方式,能够加载多种文件格式,通过创建材质、贴图并编写 shader来实现物体效果,创建立方体、球等基本元素,提供灯光、阴影、点云等等底层功能。
3~three.js劣势
虽然Three.js底层引擎级别的三维图形库，有很多开源库对它进行扩展，但较为松散，适合做轻量级可视化应用，复杂应用则需要基于此库进行大量封装才行。尤其场景输出层面，需要3 3DSMax、Maya、CAD等专业美术人员,通过建模再做一定的导出工作才能得到需要的模型，团队协作成本高。
4~ThingJS优势
ThingJS主张3D便捷开发，提供无需3D建模知识即可上手的场景搭建工具和无维护成本的场景存储云空间，模型库提供上万个行业模型资源。提供ThingJS场景工具组件,包含园区、城市或者图表搭建,可以让不具备3D知识的普通用户搭建3D场景，一个人可以完成物联网应用的基础开发。
5~ThingJS开发性能
ThingJS可支撑数十栋建筑的园区级应用,可支持从地球到城市、园区、建筑、楼层、房间、最终到物联网设备的渲染性能负载，物联网可视化效果应用优势明显，可创建信息点、线路、管线、区域、热图、粒子、动画等丰富功能，具备灵活的摄影机控制、第一人称行走、寻路导航和视点线路工具;可扩展的界面、头顶信息牌、内嵌视频监控等丰富的信息展示方式。
6~开发者角度的体验 （three.js vs ThingJS）
如果是你是初学者，three.js用起来更花费时间，就一个加载模型、调光、选择模型弹框的功能，就能写出Threejs上百行代码，ThingJS是更为上层的抽象，不用关心渲染、mesh、光线等复杂概念，更适合项目团队提高开发效率。
前端dxf文件结构
dxf是autoCad导出的通用看图文件, 它本质上是一种ascll码文件,可以使用three-dxf( ) 先将其转换成json, three-dxf是基于threejs开发的网页版看图器, 他将dxf中的图形转换成three对象, 再通过一个垂直于y轴的轨道相机实现图纸移动,缩放功能.
下面我讲一讲通过three-dxf生成出来的json格式如何解析绘制
这里, blocks是块定义, 用于定义组合图形; header是标题, 记录了文件的一般信息;
tables定义层与线的信息; tables.layer是图层信息(名称, 线型, 线宽, 是否可编辑,透明度等), tables.lineType是线定义(定义连续线,虚线,点划线等);extents 定义画幅长宽 , entities是实体,用于绘图
在extents中定义了原始cad的大小，cad默认左下方为图形原点,而在前端，canvas以左上方为图形原点，所以在绘制时，在y轴要做相应的处理。
entities中的常用属性:
图形绘制只取决于entities中的定义, 若图形在entities被定义为简单图形(非INSERT),可直接绘制, 若为组合图形,则需要先在blocks中找到相对应的块定义,然后再进行递归绘制(INSERT有嵌套现象)
下面是一个典型的组合图形json信息
绘制流程: 我们先在entities的type中发现这是一个INSERT(图形组合) , 那么我们找到关键绘制参数 position(插入位置), rotation(旋转角度), name(图形块名称,形状在blocks中定义)
此处layer名称为“家具”，color为256，lineweight为-1，表明绘图时颜色与线宽跟随图层，在tables中的layer属性中定位到“家具“图层，发现线宽line_weight为9，线型line_type为Continuous，图层颜色为65535，这个颜色是十进制，转成十六进制颜色为#00FFFF，这样就完成了绘制前的准备工作.
绘制时，首先定位到blocks中找到A$C22EE24EA字段，然后在该字段中递归遍历entities对象，对所有非INSERT属性进行绘制。注意在绘制时，在blocks中出现的所有坐标都是相对坐标，要与递归入口处的绝对坐标position相加才能得到相对于图纸的坐标。
three..js在渲染方面支持的怎么样
Three.js是大多数开发者首次接触的WebGL 3D库，Threejs库的出现解决了底层的渲染细节和复杂的数据结构，可以支持如一个房间级别,或一个楼层级别的渲染,或符合特殊要求的大量同类模型的渲染。
1~开发性能
对 WebGL进行了封装,提供了更高层的渲染接口,提供摄影机、视口的控制,提供场景组织方式,能够加载多种文件格式,通过创建材质、贴图并编写 shader来实现物体效果,创建立方体、球等基本元素,提供灯光、阴影、点云等等底层功能。
2~劣势
虽然Three.js底层引擎级别的三维图形库，有很多开源库对它进行扩展，但较为松散，适合做轻量级可视化应用，复杂应用则需要基于此库进行大量封装才行。尤其场景输出层面，需要3 3DSMax、Maya、CAD等专业美术人员,通过建模再做一定的导出工作才能得到需要的模型，团队协作成本高。
3~three.js和ThingJS 3D框架做对比
ThingJS是新兴的3D框架，2018年诞生，由北京优锘科技公司研发，旨在简化3D应用开发。轻量化的表现在：1、ThingJS封装了对模型交互事件的API、对模型的操作及层次关系，一个个具体的模型抽象把初学者从复杂的3D概念中解放出来，2、加载简单场景仅需1行代码，发布方式支持iframe, 微信和PC发布，在线化更方便，3、ThingJS是一个完成的物联网可视化应用开发生态，提供CampusBuilder, CityBuilder等场景搭建SAAS、场景存储云空间（无需付费）和10万个场景资源……
如果是你是初学者，three.js用起来更花费时间，就一个加载模型、调光、选择模型弹框的功能，就能写出Threejs上百行代码，ThingJS是更为上层的抽象，不用关心渲染、mesh、光线等复杂概念，更适合项目团队提高开发效率。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/285581.html
微信扫一扫 
支付宝扫一扫 