Shulou(Shulou.com)06/02 Report--

This article mainly introduces "the code implementation of the garbage classification system of HTML5". In the daily operation, I believe that many people have doubts about the code implementation of the garbage classification system of HTML5. The editor has consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "the code implementation of the garbage classification system of HTML5". Next, please follow the editor to study!

Code implementation

(note: the upload size of gif is limited, and please refer to the demo link for the actual effect.)

First of all, I apply the carefully arranged 3D scene, in order to have a better sense of operation experience, we need to start with its basic settings:

Gv.setMovableFunc (() = > {return false}) / / prohibit dragging gv.getWireframe = (d) = > {d.s ('wf.visible', false)} / / hide the selected border gv.setEye ([583,212,789]) / / set the eye gv.setCenter ([- 76,654]) ) / / set the center point gv.setFar (100000) / / set the far-end location gv.setNear (10) / / set the near-end location gv.setInteractors ([new ht.graph4d.MapInteractor (gv)]) / / set the interaction limit gv.setSkyBox (dm.getDataByTag ('skyBox')) / / set the sky sphere _ window.document.oncontextmenu = () = > {return false} / / globally set the right-click menu Single disable 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 so that I could deal with it later. I monitored some mouse events to form my own operation style (such as double-clicking the background to restore the view and double-clicking the model to zoom in):

Gv.mi (e = > {let data = e.data let kind = e.kind if (kind = 'doubleClickBackground') {/ / double-click the background gv.moveCamera (this.gv.scene.eye, this.gv.scene.center, {duration: 1000}) / / restore the view} else if (kind = =' doubleClickData') {/ / double-click the model gv.flyTo (data, {animation: {duration: 500}) Distance: 800}) / / narrow the viewing angle}})

All right, the preparatory work is done, let's realize the animation part. In addition to understanding the way of garbage sorting, I also refer to a lot of video of the robot arm on the Internet to learn its motion mode and action details. sort and conceive the animation of each structure and part step by step. Here I choose several animation implementations 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]) / / move the rear arm down} FinishFunc: () = > {setTimeout () = > {mechanicalArmAnim2 ()}})} function mechanicalArmAnim2 () {ht.Default.startAnim ({duration: 1000, easing: (t) = > {return t}, action: (v, t) = > {postbrachium.p3 Postbrachium.p3 () [1], postbrachium.p3 () [2]) / / Rear arm forward hydraulicRod1.r3 (degrees (0) + (degrees (8)-degrees (0)) * v, hydraulicRod1.r3 () [1], hydraulicRod1.r3 () [2]) / / hydraulic rod 1 tilted extensionRod1.r3 (degrees (0) + (degrees (8)-degrees (0)) * v, extensionRod1.r3 () [1] ExtensionRod1.r3 () [2]) / / extension rod 1 tilt extensionRod1.p3 (- 169185169v,-5166v, extensionRod1.p3 () [2]) / / extension rod 1 extension hydraulicRod2.r3 (degrees (0) + (degrees (- 8)-degrees (0)) * v, hydraulicRod2.r3 () [1] HydraulicRod2.r3 () [2]) / / hydraulic rod 2 tilted extensionRod2.r3 (degrees (0) + (degrees (- 8)-degrees (0)) * v, extensionRod2.r3 () [1], extensionRod2.r3 () [2] / / extension rod 2 tilted extensionRod2.p3 ExtensionRod2.p3 () [2]) / / extension of rod 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]) / / hydraulic rod 1 tilted extensionRod1.r3 (degrees (8) + (degrees (7)-degrees (8)) * v, extensionRod1.r3 () [1] ExtensionRod1.r3 () [2]) / / extension rod 1 tilt extensionRod1.p3 (- 185186185v,-511v, extensionRod1.p3 () [2]) / / extension rod 1 extension hydraulicRod2.r3 (degrees (- 8) + (degrees (- 7)-degrees (- 8)) * v, hydraulicRod2.r3 () [1] HydraulicRod2.r3 () [2]) / / hydraulic rod 2 tilted extensionRod2.r3 (degrees (- 8) + (degrees (- 7)-degrees (- 8)) * v, extensionRod2.r3 () [1], extensionRod2.r3 () [2]) / / extension rod 2 tilted extensionRod2.p3 (- 186185v,-511 + (- 507511) * v ExtensionRod2.p3 () [2]) / / extension lever 2 stretch postbrachium.r3 (degrees (20) + (degrees (25)-degrees (20)) * v, postbrachium.r3 () [1], postbrachium.r3 () [2] / / move the rear arm down antebrachium.r3 (oldValue + (degrees (- 40)-oldValue) * v, antebrachium.r3 () [1] Antebrachium.r3 () [2]) / / move the forearm down claw1.r3 (degrees (- 20) + (degrees (- 60)-degrees (- 20)) * v, claw1.r3 () [1], claw1.r3 () [2]) / / grab claw2.r3 (degrees (- 60) + (degrees (- 30)-degrees (- 60)) * v, claw2.r3 () [1] Claw2.r3 () [2]) / / Lower claw grab}, finishFunc: () = > {mechanicalArmAnim4 ()})}

This animation is a process from the initialization state to the downward grab of the manipulator. I divide each animation into functions to facilitate subsequent management, and each part also represents a step. One of the most complex and subtle steps is the movement of the hydraulic rod. In order to make the animation look more real, I added a delay to execute the next animation in the process of moving the arm alone to reflect the characteristics of the machine motion. The part of the hydraulic rod is also animated. If it is not handled, then the mechanical arm will have an unscientific effect when moving up and down. Animation functions are the most widely used in this kind of demo, and they also contain some slow functions. Bloggers who are interested can click here to play for themselves.

The garbage picking step also applies the adsorption function I have introduced in the past, this method is very suitable for grabbing the object, making the node adsorb to the host through setHost, which is equivalent to the child node following the parent node. At this time, you only need to offset and rotate the manipulator, and the garbage will move with it, greatly reducing the workload!

There are also some cooler property settings to show you, so that the 3D scene as a whole can have a more realistic shadow processing effect. First of all, we should pay attention to turning off extraneous node shadows through node.s ('shadow.cast', false), such as marshalling box, background, floor and panel, etc.

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

Gv.enableShadow (true, {degreeX: 0, / / projection x-axis angle degreeZ:-25, / / projection 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, / / type is hard / soft, additional edge thickness, used to provide softer edges bias:-0.003 / / depth floating point deviation complement}) so far On the "HTML5 garbage sorting system code implementation" study is over, I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.