关于javascript:基于WebGL的3D技术在网页中的运用-ThingJS-前端开发

3次阅读

共计 2496 个字符，预计需要花费 7 分钟才能阅读完成。

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

ThingJS（框架）< Three.js（引擎）< 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 图形绘制和动画的制作。

以 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）

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。

正文完