前端开发threejs库很难吗? |
您所在的位置:网站首页 › 前端外卖项目难么 › 前端开发threejs库很难吗? |
作为一个有三年前端开发的经验人来说,使用threejs开发可视化应用真心难倒了我。Threejs库的出现解决了底层的渲染细节和复杂的数据结构,终于将复杂的底层细节抽象出来,使得大家开发3d应用更容易了一些。和很多开发者交流threejs都是他们首次接触的WebGL 3D库,并能很容易的就能开始做一些实验。 但是使用Threejs开发应用还是门槛很高,但就一个加载模型,调光,选择模型弹框的功能,就能干出Threejs上百行代码。同时还有很多复杂的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; } |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |