基于 HTML5 WebGL 实现的垃圾分类系统


Posted in HTML / CSS onOctober 08, 2019

前言

垃圾分类,一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运,从而转变成公共资源的一系列活动的总称。分类的目的是提高垃圾的资源价值和经济价值,力争物尽其用。垃圾在分类储存阶段属于公众的私有品,垃圾经公众分类投放后成为公众所在小区或社区的区域性准公共资源,垃圾分类搬运到垃圾集中点或转运站后成为没有排除性的公共资源。从国内外各城市对生活垃圾分类的方法来看,大致都是根据垃圾的成分、产生量,结合本地垃圾的资源利用和处理方式来进行分类的。到2019年6月25日,生活垃圾分类制度将入法。一套应用于工业物联网的智能一体化的垃圾分类机械臂将随之而来,由此,我应用 HT for Web  的图型化编辑工具打造了一款形象生动的例子:Garbage classification,也借此机会与大家一起分享和学习。

代码实现

基于 HTML5 WebGL 实现的垃圾分类系统

(注:gif 的上传大小有限,实际效果与还请参考 demo 链接)

首先,我应用已经精心布置好的 3D 场景,为了有更好的操作体验感,我们要从它的基本设置开始:

gv.setMovableFunc(() => { return false }) // 禁止拖动
gv.getWireframe = (d) => { d.s('wf.visible', false) }  // 隐藏选中边框
gv.setEye([583, -212, -789]) // 设置眼睛
gv.setCenter([-76, -654, -133]) // 设置中心点
gv.setFar(100000) // 设置远端位置
gv.setNear(10) // 设置近端位置
gv.setInteractors([ new ht.graph3d.MapInteractor(gv) ]) // 设置交互限制
gv.setSkyBox(dm.getDataByTag('skyBox')) // 设置天空球
window.document.oncontextmenu = () => { return false } // 全局设置右键菜单禁用
gv.scene = { // 复制初始位置
    eye: ht.Default.clone(gv.getEye()),
    center: ht.Default.clone(gv.getCenter()),
    far: ht.Default.clone(gv.getFar()),
    near: ht.Default.clone(gv.getNear()),
}

 

我复制了一下整个场景的初始视角情况方便我做稍后的处理,我监听了部分鼠标事件来形成自己的操作风格(比如双击背景还原视角以及双击模型拉近视角):

gv.mi(e => {
    let data = e.data
    let kind = e.kind
    if (kind === 'doubleClickBackground') { // 双击背景
        gv.moveCamera(this.gv.scene.eye, this.gv.scene.center, {duration : 1000}) // 恢复视角
    }
    else if (kind === 'doubleClickData') { // 双击模型
        gv.flyTo(data, {animation : {duration : 500}, distance : 800}) // 拉近视角
    }
})

 

基于 HTML5 WebGL 实现的垃圾分类系统

好了,准备工作做好了,下面来实现动画部分,除了了解 垃圾分类 的方式外我还参考了网上很多机械臂的视频,学习它的运动模式和动作细节,对每个结构和部位的动画进行步骤的排序和构思。这里我挑选几处动画的实现方式来展示:

 

function mechanicalArmAnim1() {
ht.Default.startAnim({


duration: 1000,


easing: (t) => { return t },


action: (v, t) => {



postbrachium.r3(degrees(0) + (degrees(20) - degrees(0)) * v, postbrachium.r3()[1], postbrachium.r3()[2]) // 后臂向下移


},


finishFunc: () => {



setTimeout(() => {




mechanicalArmAnim2()



}, 300)


}

})
}
function mechanicalArmAnim2() {

ht.Default.startAnim({


duration: 1000,


easing: (t) => { return t },


action: (v, t) => {



postbrachium.p3(-208 + (-184 + 208) * v, postbrachium.p3()[1], postbrachium.p3()[2]) // 后臂前伸



hydraulicRod1.r3(degrees(0) + (degrees(8) - degrees(0)) * v, hydraulicRod1.r3()[1], hydraulicRod1.r3()[2]) // 液压杆1倾斜



extensionRod1.r3(degrees(0) + (degrees(8) - degrees(0)) * v, extensionRod1.r3()[1], extensionRod1.r3()[2]) // 伸长杆1倾斜



extensionRod1.p3(-169 + (-185 + 169) * v, -516 + (-511 + 516) * v, extensionRod1.p3()[2]) // 伸长杆1伸长



hydraulicRod2.r3(degrees(0) + (degrees(-8) - degrees(0)) * v, hydraulicRod2.r3()[1], hydraulicRod2.r3()[2]) // 液压杆2倾斜



extensionRod2.r3(degrees(0) + (degrees(-8) - degrees(0)) * v, extensionRod2.r3()[1], extensionRod2.r3()[2]) // 伸长杆2倾斜



extensionRod2.p3(-169 + (-185 + 169) * v, -516 + (-511 + 516) * v, extensionRod2.p3()[2]) // 伸长杆2伸长


},


finishFunc: () => {



setTimeout(() => {




mechanicalArmAnim3()



}, 300)


}

})
}
function mechanicalArmAnim3() {

let oldValue = antebrachium.r3()[0]

ht.Default.startAnim({


duration: 1000,


easing: (t) => { return t },


action: (v, t) => {



hydraulicRod1.r3(degrees(8) + (degrees(7) - degrees(8)) * v, hydraulicRod1.r3()[1], hydraulicRod1.r3()[2]) // 液压杆1倾斜



extensionRod1.r3(degrees(8) + (degrees(7) - degrees(8)) * v, extensionRod1.r3()[1], extensionRod1.r3()[2]) // 伸长杆1倾斜



extensionRod1.p3(-185 + (-186 + 185) * v, -511 + (-507 + 511) * v, extensionRod1.p3()[2]) // 伸长杆1伸长



hydraulicRod2.r3(degrees(-8) + (degrees(-7) - degrees(-8)) * v, hydraulicRod2.r3()[1], hydraulicRod2.r3()[2]) // 液压杆2倾斜



extensionRod2.r3(degrees(-8) + (degrees(-7) - degrees(-8)) * v, extensionRod2.r3()[1], extensionRod2.r3()[2]) // 伸长杆2倾斜



extensionRod2.p3(-185 + (-186 + 185) * v, -511 + (-507 + 511) * v, extensionRod2.p3()[2]) // 伸长杆2伸长



postbrachium.r3(degrees(20) + (degrees(25) - degrees(20)) * v, postbrachium.r3()[1], postbrachium.r3()[2]) // 后臂向下移



antebrachium.r3(oldValue + (degrees(-40) - oldValue) * v, antebrachium.r3()[1], antebrachium.r3()[2]) // 前臂向下移



claw1.r3(degrees(-20) + (degrees(-60) - degrees(-20)) * v, claw1.r3()[1], claw1.r3()[2]) // 上爪抓取



claw2.r3(degrees(-60) + (degrees(-30) - degrees(-60)) * v, claw2.r3()[1], claw2.r3()[2]) // 下爪抓取


},


finishFunc: () => {



mechanicalArmAnim4()


}

})
}

 

基于 HTML5 WebGL 实现的垃圾分类系统

这一段动画是机械臂从初始化状态到向下抓取的一个过程,我将每段动画分成函数来写比较方便后续管理,每一处也代表了一个步骤。这其中最复杂且细微的步骤要数液压杆的运动了,为了让动画看起来更加真实,我除了将手臂单独运动的过程中加入了延时执行下一段动画以体现机器运动的特点外,也把液压杆的部分也做了动画,如果不做处理,那么机械臂在上下移动的时候就会有不科学的效果出现。动画函数 在这种 demo 中应用的最广,而且里面也包含了一些缓动函数,有兴趣的博友们可以 点此处 自己亲自动手玩一玩~

基于 HTML5 WebGL 实现的垃圾分类系统基于 HTML5 WebGL 实现的垃圾分类系统

这里面的拾取垃圾步骤还应用了我过去介绍过的 吸附 功能,这个方法非常的适合抓取物体的动作,通过 setHost 使节点吸附于宿主,这样就相当于子节点跟随父节点移动,此时只需要对机械臂进行偏移和旋转的操作,垃圾便会随之一起运动了,大大减少了工作量!

基于 HTML5 WebGL 实现的垃圾分类系统

还有一部分更酷的属性设置给大家展示一下,可以让 3D 场景整体有更真实的阴影处理效果。首先我们要注意将无关的节点阴影通过 node.s('shadow.cast', false) 关闭,比如编组用的box,背景,地板和面板等。

最后我们就把阴影的细节做下调整,达到比较好的效果:

 

gv.enableShadow(true, {
degreeX : 0,       // 投影 x 轴角度

degreeZ : -25,      // 投影 z 轴角度

intensity : 0.3,    // 阴影强度, 1 为黑色

quality : 'high',  // low / medium / high / ultra / 4096数值, 质量

type : 'soft',     // none / hard / soft

radius : 0.2,      // type 为 hard / soft 时,补充的边缘厚度,用来提供更柔和的边缘

bias : -0.003     // 深度浮点偏差补足
})

总结

更多动画 demo 以及工业化领域的文章请继续关注我的博客,感谢大家的支持!

医疗站(https://www.cnblogs.com/htdaydayup/p/11558748.html)

基于 HTML5 WebGL 实现的垃圾分类系统

在工业物联网从婴儿走到青年的成熟道路上,一定会有更多的潜力和挑战在等着我们,等待我们去开发,等待我们去创造!相信我们的技术成为国际水准会指日可待!同时在十一国庆后的第一个工作日祝大家精神饱满,工作顺利!

总结

以上所述是小编给大家介绍的基于 HTML5 WebGL 实现的垃圾分类系统,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
html5唤起app的方法
Nov 30 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 #HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 #HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 #HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 #HTML / CSS
canvas基础之图形验证码的示例
Jan 02 #HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 #HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 #HTML / CSS
You might like
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
Javascript - HTML的request类
2006/07/15 Javascript
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
JavaScript 模拟用户单击事件
2009/12/31 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
Python实现提取文章摘要的方法
2015/04/21 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
浅谈python数据类型及类型转换
2017/12/18 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
Python高级property属性用法实例分析
2019/11/19 Python
利用python实现AR教程
2019/11/20 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
九月份红领巾广播稿
2014/01/22 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
大学军训的体会
2014/11/08 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP
mysql的Buffer Pool存储及原理
2022/04/02 MySQL