Foreword
Garbage, generally refers to certain provisions or standards garbage storage, handling classified placing and classification, thereby transformed into the general term for a range of activities of public resources. The purpose of classification is to improve waste resources and economic value, and strive to make the best use. Garbage belongs to the public in the classification stage private storage products, garbage classification after serving as a regional public quasi-public resources to the public where the district or community, waste is transported to the garbage becomes public resources are not exclusive of the focal point or transfer station. Methods cities from home and abroad for garbage classification point of view, generally are based on waste composition, the amount of produce, resource utilization and treatment in conjunction with local refuse to classify. To June 25, 2019, the garbage classification system into law. A set of things used in industrial intelligent integration of garbage robotic arm will follow, therefore, I use HT for Web of graphics editing tools has created a vivid example: Garbage Classification , also by this opportunity to share and learn with you.
Code
(Note: limited gif upload size, the actual results and also refer to the demo links)
First of all, my application has been carefully arranged good 3D scene, in order to have a better sense of operating experience, we start from its basic settings:
gv.setMovableFunc (() => {return false}) // prohibited drag
gv.getWireframe = (d) => { ds ( 'wf.visible', false)} // hide selected frame
gv.setEye ([583 , -212, -789]) // set eyes
gv.setCenter ([- 76, -654, -133]) // set the center point
gv.setFar (100000) // disposed distal position
gv.setNear (10) // set the proximal position
gv.setInteractors ([new ht.graph3d.MapInteractor (gv) ]) // set limits interaction
gv.setSkyBox (dm.getDataByTag ( 'skyBox') ) // set sky ball
window.document.oncontextmenu = () => {return false } // disable context menu global settings
gv.scene = {// the copy initial position
Eye: ht.Default.clone (gv.getEye ()),
Center: ht.Default.clone (GV .getCenter ()),
FAR: ht.Default.clone (gv.getFar ()),
near: ht.Default.clone (gv.getNear ()),
}
I copied the whole scene a bit of initial perspective of the situation so that I can do later in the process, I listen for some mouse events to form their own operating style (such as double-click and double-click the background reduction perspective model closer angle):
gv.mi (E => {
the let Data = e.data
the let kind e.kind =
IF (kind === 'doubleClickBackground') {// Double-background
gv.moveCamera (this.gv.scene.eye, this.gv .scene.center, {duration: 1000}) // restore perspective
}
the else IF (kind === 'doubleClickData') {// Double-click model
gv.flyTo (data, {animation: { duration: 500}, distance: 800 }) // a closer angle
}
})
Well, ready to do a good job, to achieve the following animation section, in addition to understanding garbage outside the way I also made reference to a lot of online video manipulator, learn its movement pattern and details of the action, animation and location of each structure sorting steps and concepts. Here I picked implementation of several animation to show:
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()
}
})
}
这一段动画是机械臂从初始化状态到向下抓取的一个过程，我将每段动画分成函数来写比较方便后续管理，每一处也代表了一个步骤。这其中最复杂且细微的步骤要数液压杆的运动了，为了让动画看起来更加真实，我除了将手臂单独运动的过程中加入了延时执行下一段动画以体现机器运动的特点外，也把液压杆的部分也做了动画，如果不做处理，那么机械臂在上下移动的时候就会有不科学的效果出现。动画函数 在这种 demo 中应用的最广，而且里面也包含了一些缓动函数，有兴趣的博友们可以 点此处 自己亲自动手玩一玩~
这里面的拾取垃圾步骤还应用了我过去介绍过的 吸附 功能，这个方法非常的适合抓取物体的动作，通过 setHost 使节点吸附于宿主，这样就相当于子节点跟随父节点移动，此时只需要对机械臂进行偏移和旋转的操作，垃圾便会随之一起运动了，大大减少了工作量！
还有一部分更酷的属性设置给大家展示一下，可以让 3D 场景整体有更真实的阴影处理效果。首先我们要注意将无关的节点阴影通过 node.s('shadow.cast', false) 关闭，比如编组用的box，背景，地板和面板等。
最后我们就把阴影的细节做下调整，达到比较好的效果：
gv.enableShadow (to true, {
degreeX: 0, // x-axis projection angle
degreeZ: -25, // z-axis projection angle
intensity: 0.3, // shadows intensity, a black
quality: 'high', // low / medium / high / ultra / 4096 values, quality
type: 'soft', // none / Hard / soft
RADIUS: 0.2, when // type of hard / soft, complementary edge thickness, to provide a softer edge
bias: complement floating point depth deviation -0.003 @
})
to sum up
More animation demo as well as articles in the field of industrial Stay tuned to my blog, thank you for your support!
Health posts ( https://www.cnblogs.com/htdaydayup/p/11558748.html )
Things in the industry come from young babies mature way, there will be more potential and challenges ahead of us, waiting for us to develop, waiting for us to create! We believe that our technology will become the international standard just around the corner! At the same time I wish you all full of energy at the first working day after the National Day and smooth work!