Preface

Classification of garbage is generally the general name of a series of activities that transform garbage into public resources by classifying, storing, putting in and carrying it in accordance with certain regulations or standards.The purpose of classification is to improve the resource and economic value of garbage and strive to make the best use of it.Garbage belongs to the public's private goods in the stage of classified storage. After classified and put into the public, garbage becomes a regional quasi-public resource in the community or community where the public live. After classified and transported to the garbage concentration point or transporting station, garbage becomes a non-excluded public resource.From the point of view of the classification methods of domestic garbage in domestic and foreign cities, the classification is generally based on the composition and amount of garbage, combined with the local garbage resource utilization and treatment methods.By June 25, 2019, the domestic waste classification system will be introduced into the law.A set of smart integrated garbage sorting arms for industrial Internet of Things will follow, from which I apply HT for Web Graphical editing tools create a vivid example: Garbage classification And take this opportunity to share and learn with you.

code implementation

(Note: The upload size of gif is limited. See demo link for actual effect)

First, I'm using a well-planned 3D scene, and for a better operational experience, we'll start with its basic settings:

gv.setMovableFunc(() => { return false }) // Prohibit dragging
gv.getWireframe = (d) => { d.s('wf.visible', false) }  // Hide Selected Border
gv.setEye(\[583, -212, -789\]) // Set eyes
gv.setCenter(\[-76, -654, -133\]) // Set Center Point
gv.setFar(100000) // Set Remote Location
gv.setNear(10) // Set Near End Position
gv.setInteractors(\[ new ht.graph3d.MapInteractor(gv) \]) // Set Interaction Restrictions
gv.setSkyBox(dm.getDataByTag('skyBox')) // Set Skyball
window.document.oncontextmenu = () => { return false } // Global Settings Right-click Menu Disabled
gv.scene = { // Copy Initial Location
    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 initial view of the whole scene to make it easier for me to handle later. I listened to some mouse events to develop my own style of operation (such as double-clicking the background to restore the view and double-clicking the model to narrow the view):

gv.mi(e => {
    let data = e.data
    let kind = e.kind
    if (kind === 'doubleClickBackground') { // Double-click background
        gv.moveCamera(this.gv.scene.eye, this.gv.scene.center, {duration : 1000}) // Restore Perspective
    }
    else if (kind === 'doubleClickData') { // Double-click Model
        gv.flyTo(data, {animation : {duration : 500}, distance : 800}) // Increase the viewing angle
    }
})

Okay, you're ready. Here's the animation part, except for understanding Refuse classification In addition to this, I have also consulted the videos of many robotic arms on the Internet to learn their motion modes and details, and to arrange and conceive the animations of each structure and part step by step.Here I pick a few ways to implement animations to show them:

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\]) // Move back arm down
　　　　},
　　　　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\]) // Back arm forward extension
　　　　　　hydraulicRod1.r3(degrees(0) + (degrees(8) - degrees(0)) * v, hydraulicRod1.r3()\[1\], hydraulicRod1.r3()\[2\]) // Hydraulic rod 1 inclined
　　　　　　extensionRod1.r3(degrees(0) + (degrees(8) - degrees(0)) * v, extensionRod1.r3()\[1\], extensionRod1.r3()\[2\]) // Extension bar 1 inclined
　　　　　　extensionRod1.p3(-169 + (-185 + 169) * v, -516 + (-511 + 516) * v, extensionRod1.p3()\[2\]) // Extension Bar 1 Extension
　　　　　　hydraulicRod2.r3(degrees(0) + (degrees(-8) - degrees(0)) * v, hydraulicRod2.r3()\[1\], hydraulicRod2.r3()\[2\]) // Hydraulic rod 2 inclined
　　　　　　extensionRod2.r3(degrees(0) + (degrees(-8) - degrees(0)) * v, extensionRod2.r3()\[1\], extensionRod2.r3()\[2\]) // Extension bar 2 inclined
　　　　　　extensionRod2.p3(-169 + (-185 + 169) * v, -516 + (-511 + 516) * v, extensionRod2.p3()\[2\]) // Extension Bar 2 Extension
　　　　},
　　　　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\]) // Hydraulic rod 1 inclined
　　　　　　extensionRod1.r3(degrees(8) + (degrees(7) - degrees(8)) * v, extensionRod1.r3()\[1\], extensionRod1.r3()\[2\]) // Extension bar 1 inclined
　　　　　　extensionRod1.p3(-185 + (-186 + 185) * v, -511 + (-507 + 511) * v, extensionRod1.p3()\[2\]) // Extension Bar 1 Extension
　　　　　　hydraulicRod2.r3(degrees(-8) + (degrees(-7) - degrees(-8)) * v, hydraulicRod2.r3()\[1\], hydraulicRod2.r3()\[2\]) // Hydraulic rod 2 inclined
　　　　　　extensionRod2.r3(degrees(-8) + (degrees(-7) - degrees(-8)) * v, extensionRod2.r3()\[1\], extensionRod2.r3()\[2\]) // Extension bar 2 inclined
　　　　　　extensionRod2.p3(-185 + (-186 + 185) * v, -511 + (-507 + 511) * v, extensionRod2.p3()\[2\]) // Extension Bar 2 Extension
　　　　　　postbrachium.r3(degrees(20) + (degrees(25) - degrees(20)) * v, postbrachium.r3()\[1\], postbrachium.r3()\[2\]) // Move back arm down
　　　　　　antebrachium.r3(oldValue + (degrees(-40) - oldValue) * v, antebrachium.r3()\[1\], antebrachium.r3()\[2\]) // Move forearm down
　　　　　　claw1.r3(degrees(-20) + (degrees(-60) - degrees(-20)) * v, claw1.r3()\[1\], claw1.r3()\[2\]) // Upper Claw Grabbing
　　　　　　claw2.r3(degrees(-60) + (degrees(-30) - degrees(-60)) * v, claw2.r3()\[1\], claw2.r3()\[2\]) // Lower Paw Grab
　　　　},
　　　　finishFunc: () => {
　　　　　　mechanicalArmAnim4()
　　　　}
　　})
}

This animation is a process from the initialization state to the downward capture of the mechanical arm. I divide each animation into functions for easy follow-up management, and each represents a step.The most complex and subtle step is the movement of the hydraulic rod. To make the animation look more realistic, I animated the part of the hydraulic rod in addition to adding a delay to the next animation during the movement of the arm alone to reflect the characteristics of the machine. If not handled, the moving of the arm up and down would have an unscientific effect.Appear. Animation Functions This demo is the most widely used and contains some slowdown functions, which interested bloggers can use. Click here Play by yourself~

The garbage pick-up procedure here also applies what I've described in the past. Adsorbent Function, this method is very suitable for capturing objects. By setting Host, the node is attached to the host, which is equivalent to the child node following the parent node. At this time, only the offset and rotation of the arm are needed, and the garbage will move with it, greatly reducing the workload!

There are also some cooler property settings that show you how a 3D scene as a whole can have a more realistic shading effect.First of all, we need to be careful to turn off irrelevant node shadow s via node.s('shadow.cast', false), such as box es for grouping, backgrounds, floors and panels.

Finally, we will adjust the details of the shadow to achieve better results:

gv.enableShadow(true, {
　　degreeX : 0,       // Projection x-axis angle
　　degreeZ : -25,      // Projected z-axis angle
　　intensity : 0.3,    // Shadow intensity, 1 is black
　　quality : 'high',  // low / medium / high / ultra / 4096 value, mass
　　type : 'soft',     // none / hard / soft
　　radius : 0.2,      // When type is hard / soft, supplementary edge thickness is used to provide softer edges
　　bias : -0.003     // Depth Floating Point Deviation Complement
})

summary

More animated demo and industrial articles, please continue to follow my blog, thank you for your support!

Medical Station ( https://www.cnblogs.com/htdaydayup/p/11558748.html)

In the industrial Internet of Things from infants to young adults on the road to maturity, there will be more potential and challenges waiting for us, waiting for us to develop, waiting for us to create!Believe that our technology will become an international standard soon!At the same time, on the first working day after the 11th National Day, I wish you all full of spirit and smooth work!