Three.js、ThingJS这些引擎库能够加载3D制作软件的模型，大幅度提高了制作效率，扭转WebGL开发艰难的场面，让Web开发者享受便捷的3D开发服务。三者的难度比照如下：

ThingJS（框架）< Three.js（引擎）< WebGL（接口）

3D绘图规范 - WebGL

WebGL是一种3D绘图规范，通过联合Javascript和OpenGL ES 2.0，能够为HTML5的Canvas标签提供硬件3D减速渲染，这样Web开发人员能够借助零碎显卡在浏览器里更流畅地展现3D场景和模型。利用WebGL进行绘图的流程如下所示：

由此得悉，原生 WebGL进行3D网页制作，其过程十分繁琐，开发难度很多，所应用的开发概念十分底层，重大影响WebGL的开发效率。因而，很多3D图形引擎库应运而生，间接应用Javascript脚本语言开发，将WebGL进行不同水平的封装，例如“three.js“、“scenceJS”、“Oak3d”和“simjs”等，这些引擎库可能让用户更加不便地进行3D图形绘制和动画的制作。

3D图形引擎库 - Three.js

以Three.js为例，绘图的流程如下所示：

Three.js是基于WebGL的 3D Javascript库，它封装了场景、相机、几何、3D模型加载器、灯光、材质、着色器、动画、粒子、数学工具等。这样的封装让用户可能更加直观的在网页中制作3D图形和动画。就像是搭乐高一样轻松。

在Three.js中场景、相机和渲染器是3D图形绘制的根底：场景是所有对象搁置和展现的平台；相机决定图形展现的角度；渲染器决定了渲染的后果应该画在页面的什么元素下面，并且以怎么的形式来绘制。以下代码给出了图形绘制的具体过程，如果3D模型很简单，能够在专门的3D绘图软件中进行绘制，而后由Three.js加载图形:

//创立场景 var scene =new THREE.Scene(）;//创立相机 var camera =new THREE. PerspectiveCamera(75, window.inner Width/window. innerHeight,0.1,1000)；//创立渲染器 var renderer= new THREE. WebGLRenderer（）; renderer.setSize( window.innerWidth, window. innerHeight ) ；document. body.appendChild( renderer. domElement）；//绘制立方体 var geometry =new THREE. BoxGeometry( 1, 1, 1);//给立方体贴材质 var material =new THREE. MeshBasicMaterial （{color: 0x00ff00} )；var cube=new THREE. Mesh( geometry, material);//将立方体放在场景中 scene.add(cube); camera.position.z=5;//渲染 renderer. render( scene, camera）

基于WebGL的3D框架 - ThingJS

ThingJS是新兴的3D框架，2018年诞生，是针对物联网可视化畛域的JavaScript 3D Library，旨在简化3D利用开发效率，它封装了3D源码，提供残缺的物联网开发概念（修建、楼层、房间、物、标牌、线路、区域、热图、事件、查问、地图、全景图），利用可视化开发组件在线开发（CampusBuilder【客户端下载】+ThingJS），绘图的流程如下所示：

ThingJS封装了对模型交互事件的API、对模型的操作及档次关系，一个个具体的模型形象把初学者从简单的3D概念中解放出来。例如常见的智慧修建，ThingJS 平台应用Javascript调用封装好的概念进行开发，比three.js更为顶层，不必关怀渲染、mesh、光线等简单概念，具备一年的javascript根底即可开发3D我的项目。

var app = new THING.App({    url: 'https://www.thingjs.com/static/models/storehouse'     // 场景地址});app.on('load', function (ev) {    // 场景加载实现后 进入园区层级    app.level.change(ev.campus);});// 监听修建层级的 EnterLevel 事件app.on(THING.EventType.EnterLevel, ".Building", function (ev) {    // 以后进入的层级对象    var current = ev.current;    // 上一层级对象    var preObject = ev.previous;    // 如果以后层级对象的父亲是上一层级对象（即正向进入）    if (current.parent === preObject) {        console.log("从 " + preObject.type + " 进入了 " + current.type);    }    else {        console.log("进入 " + current.type + "（从 " + preObject.type + " 退出）");    }});// 监听修建层级的 LeaveLevel 事件app.on(THING.EventType.LeaveLevel, ".Building", function (ev) {    // 要进入的层级对象    var current = ev.current;    // 上一层级对象（退出的层级）    var preObject = ev.previous;    if (current.parent === preObject) {        console.log("退出 " + preObject.type + " 进入 " + current.type);    }    else {        console.log("退出 " + preObject.type + " ，返回 " + current.type);    }})

较之于引擎层、接口层，3D框架无疑是更为轻松的开发方式！ThingJS一直简化3D我的项目开发流程，不久的未来，3D技术将会在物联网畛域越来越遍及。登录【资源核心】查看demo。