“志之所趋，无远弗届 穷山距海，不能限也”
如今2D应用变为3D应用的需求也越来越强烈，在3D方面WebGL不管从功能还是性能方面都在逐渐加强。3D在描述真实世界过程中能够带给我们更强的视觉感受。通过webgl来控制这些三维化模型，在可视的基础上还能可控，这也是目前三维可视化的一个发展方向，三维可视化解决方案的产生让使用者能够在数据大屏、手机上实时监控被可视化的场景，展现力与张力相比于没有可视化功能的解决方案更加强大，基于WebGL技术的3D框架有很多，其中优秀的工具有threejs、unity、thingjs等，今天主要探讨一下Three.js 和 Thingjs。
Three.jsThreejs是目前最火最流行的3D开源框架。threejs对于底层的开发已经到达了一种的超级厉害超级棒地步，用threejs可以完成渲染，你可以去画点，线，面，可以去上色、贴图、处理光线，视角转动等等等等。Threejs库的出现解决了底层的渲染细节和复杂的数据结构，终于将复杂的底层细节抽象出来，使得大家开发3d应用更容易了一些。很多WebGL 3D库开发者首次接触threejs可以很容易的就能开始做一些实验。
Threejs三大组件：场景(scene)、相机(camera)和渲染器(renderer)。如果想在屏幕上展示 3D 物体，大体上的思路是这样的：
首先创建一个三维空间Scene ；
设置观察的方向和角度，确定一个观察点Camera ；
添加供观察的物体Object3D 类，如 Mesh、Group、Line 等到Scene中
最后我们需要把所有的东西Renderer 到屏幕上。
Three.js完整运行流程
1. 创建场景var scene = new THREE.Scene();
2. 创建相机，设置可视范围
var camera = new THREE.PerspectiveCamera(45, windows.innerWidth / windows.innerHeight, 0.1, 100) ;
3. 创建渲染器， 设置渲染范围， 并加载到页面中去
varrenderer=newTHREE.WebGLRenderer();renderer.setsize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
4. 设置灯光, 并添加到场景中
varlight=newTHREE.DirectionalLight(oxFF0000,1.0)//方向光light.position.set(100, 100, 200);secen.add(light);
5.创建几何体，添加材料（或纹理），创建 网格对象， 将网格对象添加到场景中
vargeometry=newTHREE.CubeGeometry(1,1,1);var material = new THREE.MeshBasicMaterial{collor : 0x00ff00}) // 或 {map : something}var cube = new THREE.Mesh(geometry, material);scene.add(cube);
6.渲染（结合相机与场景）
renderer.add(scene,camera);
实时渲染：
function render () { cube.rotation.x = 0.1; // 物体绕 x 轴旋转 renderer.add(scene, camera); requestAnimationFrame(render); // 循环执行}场景实例
根据上面说的，我们首先需要创建一个场景、相机、渲染器。
// 创建场景var scene = new THREE.Scene();// 创建透视相机var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 创建一个 WebGL 渲染器varrenderer=newTHREE.WebGLRenderer({alpha:true,});//默认情况下为黑色场景，此处设置为透明（即白色场景）//设置渲染器为全屏renderer.setSize(window.innerWidth, window.innerHeight);// 添加到网页中document.body.appendChild(renderer.domElement);当了解图形的基本知识之后，在上面的代码的基础上添加简单图像。var geometry = new THREE.BoxGeometry(1,1,1); // 创建一个长宽高都为1个单位的立方体var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); // 创建材质，对光照无感var cube = new THREE.Mesh(geometry, material); // 创建一个立方体网格（mesh）,将材质包裹在立方体上scene.add(cube); // 将立方体网格添加到场景中camera.position.z = 5; // 指定相机位置functionrender(){requestAnimationFrame(render),renderer.render(scene,camera)};render();// 在render（）函数中添加以下代码使上面在场景中添加的正方体运动起来。cube.rotation.x = 0.1;cube.rotation.y =0.1;
ThingJS
在物联网可视化行业不断兴起的情况下，3D场景的制作也不仅限于在电影特效那方面了，而是迈入了各个行业，智慧楼宇、智慧城市、智慧园区、智慧港口等等可视化行业案例也是不断地产生，各种模型也是应有尽有，那么如何去使用这些模型？如何快速搭建一个3D可视化场景呢？
在物联网可视化行业不断兴起的情况下，3D场景的制作也不仅限于在电影特效那方面了，而是迈入了各个行业，智慧楼宇、智慧城市、智慧园区、智慧港口等等可视化行业案例也是不断地产生，各种模型也是应有尽有，那么如何去使用这些模型？如何快速搭建一个3D可视化场景呢？基于 HTML5 和 WebGL 技术，ThingJS 可方便地在主流浏览器上进行浏览和调试，支持 PC 和移动设备。ThingJS 为可视化应用提供了简单、丰富的功能，只需要具有基本的 Javascript 开发经验即可上手。
编码对比
threejs的模型加载
function load3DModel(){ varloader=newTHREE.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 ); } ); }
thingjs的模型加载
varapp=newTHING.App({ container: ‘div3d’, url: ‘https://speech.uinnova.com/static/models/building’ });
在这个大数据爆发的时代，数据可视化也逐渐兴起，并且3D可视化相比于2D更加直观，如旋转查看物体，进入楼层、进入房间，还可以以“第一人称”的视角在场景中行走，比起2D来说，3D更加直观可视。同时将3D与数据结合，让3D场景也不在空洞，反而有了无限的可能！2D图表虽然也能反映出数据的关联性，但纯粹的2D图表却不能像3D那样既能查看如每个维度上的数据，又能查看与之相关的场景，2D方式无法将场景和数据完美的结合起来，但是3D可视化的方式，能够更直观，更贴切，更有效的反应数据相关性，处理数据。研究表明：比起文字，人们更喜欢看图，比起看2D图型，人们内心更喜欢查看3D图形，正如3D电影的兴起一般，3D可视化的风帆也正扬起。
目前，3D可视化技术广泛应用于各行各业，如机房管理、粮仓管理、校园管理、小区管理、电力管理、建筑管理、监控管理等等，通过3D可视化技术，结合实时数据能够达到设备仿真运行状态监控的效果，并且通过图像、3D技术，结合实体模型，使设备形象和实时信息更加具体，从而提升监控和管理效率，并且能够消除潜在隐患，减少人力损耗等等好处。
物联网开发中，最为强大的工具还是 Unity、threejs，但是就目前而言，封装threejs的ThingJS更加的简单，更专注业务层面，对于技术的要求更低，开发人员无需了解建模方面的知识，而是能够专注于开发，相比于其他工具，ThingJS无法做到操作底层参数，但也因为它的便捷，成为了目前市场上应用广泛、普及的智能可视化管理平台。
如果是想快速轻松的做项目，可以选择thingjs，如果对于渲染、点线面等要求十分严格，千万不要选择thingjs，thingjs就是简化了开发难度，但是也因此无法像threejs那样有精细的模型制作能力，如果你是3D开发爱好者，就去threejs的海洋驰骋吧! 如果你是天天加班赶时间的技术人员，还是跟我一起学习thingjs吧~
– END –
