基于HTML5WebGL实现的垃圾分类系统资源-CSDN文库

47 浏览量 2021-01-19 14:58:12 上传评论收藏 565KB PDF 举报

资源推荐

资源详情

资源评论

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

前言前言

垃圾分类，一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运，从而转变成公共资源的一系列活动的总称。分类的目的是提高垃圾的资源价值和经济价值，力争物尽其用。垃圾在分类储

存阶段属于公众的私有品，垃圾经公众分类投放后成为公众所在小区或社区的区域性准公共资源，垃圾分类搬运到垃圾集中点或转运站后成为没有排除性的公共资源。从国内外各城市对生活垃圾分类的

方法来看，大致都是根据垃圾的成分、产生量，结合本地垃圾的资源利用和处理方式来进行分类的。到2019年6月25日，生活垃圾分类制度将入法。一套应用于工业物联网的智能一体化的垃圾分类机械

臂将随之而来，由此，我应用 HT for Web 的图型化编辑工具打造了一款形象生动的例子：Garbage classification，也借此机会与大家一起分享和学习。

代码实现代码实现

（注：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}) // 拉近视角

}

})

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

挑选几处动画的实现方式来展示：

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()

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38747233

粉丝: 8
资源: 969

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip