前端开发threejs库很难吗?

4,542 阅读2分钟

      作为一个有三年前端开发的经验人来说,使用threejs开发可视化应用真心难倒了我。Threejs库的出现解决了底层的渲染细节和复杂的数据结构,终于将复杂的底层细节抽象出来,使得大家开发3d应用更容易了一些。和很多开发者交流threejs都是他们首次接触的WebGL 3D库,并能很容易的就能开始做一些实验。

但是使用Threejs开发应用还是门槛很高,但就一个加载模型,调光,选择模型弹框的功能,就能干出Threejs上百行代码。同时还有很多复杂的3D概念需要理解。


thingjs-面向物联网的3D可视化开发平台

这时就需要ThingJS了。ThingJS是更为上层的抽象,不用关心,渲染,mesh,光线等复杂概念。它抽象是一个个具体的模型,ThingJS封装了对模型交互事件的各种api,比如单击,左键,鼠标滑过等,ThingJS封装了对模型的操作,例如移动,放大缩小,上色,勾边,甚至开门,ThingJS还封装了模型的层次关系,例如物体是放在某个房间里的,房间又在某个楼层,楼层又是某个大楼的,大楼在园区里。这样讲是不是更直观呢?所以既然有难度不如使用封装threejs库的thingjs吧。

园区结构.js

/**

* 说明:展示园区下的 Thing 物体、buildings 和 ground

* 园区下 只有在 CampusBuilder 中编辑了UserID、Name 或自定义属性的物体(摆放的模型),

* 才能在 ThingJS 中创建为 Thing 对象,

* 否则将合并到园区的 ground 中,无法单独进行管理。

* 操作:点击复选框

*/

var app = new THING.App({

// 场景地址

"url": 'https://www.thingjs.com/static/models/storehouse'

});

app.on('load', function (ev) {

var campus = ev.campus;

app.level.change(campus);

var checkbox = createCheckBox();

checkbox[0].on('change', function (ev) {

// 获取园区下的所有建筑,返回为 Selector 结构

var buildings = campus.buildings;

if (ev) {

buildings.style.color = '#ff0000';

}

else {

buildings.style.color = null;

}

});

checkbox[1].on('change', function (ev) {

// 获取园区下的所有 Thing 类物体,返回为 Selector 结构

var things = campus.things;

if (ev) {

things.style.color = '#ff0000';

}

else {

things.style.color = null;

}

})

checkbox[2].on('change', function (ev) {

// 获取园区下的 ground

var ground = campus.ground;

if (ev) {

ground.style.color = '#ff0000';

}

else {

ground.style.color = null;

}

})

})

function createCheckBox() {

// 界面组件

var panel = new THING.widget.Panel({

titleText: '园区级别结构',

hasTitle: true

});

// 创建数据对象

var dataObj = {

checkbox: { '获取 buildings': false, '获取 things': false, '获取 ground': false },

};

// 加载复选框组件

var check = panel.addCheckbox(dataObj, 'checkbox');

return check;

}