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

Today, the editor will share with you the relevant knowledge points about how to realize the medical logistics system in HTML5 WebGL. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Realization process

Increase the light source

The whole original scene is actually very dark, so you need to use the effect of light to illuminate the whole scene to make it close to the real-world scene.

Some properties of light:

Type represents the type of light

Color represents the color of the light

Intensity represents the intensity of the light (1 is the maximum)

Representative range of range

AddLight () {const skyBox = this.dm.getDataByTag ('skyBox') / / limit the field of view within the skyball this.gv.setSkyBox (skyBox) const light = new ht.Light () const lightSource = this.dm.getDataByTag (' sunlight'). P3 () const config = {'light.type':' point', 'light.color':' white' 'light.intensity': 0.3,' light.range': 10000} light.s (config) light.p3 (lightSource) this.dm.add (light)}

Look at the object

See a small window in the lower left corner, which is actually another 3D scene. Position it to the lower left corner, and both scenes use deserialize.

Because you want to locate the movement of the medical box, the flyTo method is used here.

Var renderCanvas = function (medical, duration) {ht.Default.startAnim ({duration, easing (v, t) {return t}, action (v, t) {outScreenG3d.flyTo (medical, {direction: [- 5,3,5], distance: 300})}

Encapsulate animation

If you want to achieve so much animation, the first thing that comes to mind is the process of moving objects one by one. We can encapsulate their movements, such as the walking of the medical box, the lift of the elevator, the conveyor belt to transport the medical box and so on.

As you can see in the picture, the medical box is always moving, so a walking animation is defined, and the walking distance, walking direction and animation configuration of each medical box are all transmitted parameters.

The parameters to be explained here:

1.node (corresponding element)

2.fn (function for callback after animation)

3.config (Animation configuration)

4.coord (direction axis)

/ / Walk animation walkAnim (node, fn, config, coord) {const {duration Space} = config const positionArray = node.p3 () let isShadow = false let ShadowNode = null / / if the moving element is an icu car or a supply car, get its shadow to follow the element moving if (node.getTag () = 'supply' | | node.getTag () = =' icuCar') {isShadow = true ShadowNode = this.dm.getDataByTag (`${node.getTag ()} Shadow`)} ht.Default.startAnim ({duration) Easing: function (t) {return t}, action (v, t) {if (coord = ='x') {node.p3 (positionArray [0] + t * space, positionArray [1], positionArray [2]) isShadow & & ShadowNode.p3 (positionArray [0] + t * space, positionArray [1]) PositionArray [2])} else if (coord = ='y') {node.p3 (positionArray [0], positionArray [1] + t * space, positionArray [2]) isShadow & & ShadowNode.p3 (positionArray [0], positionArray [1] + t * space, positionArray [2])} else {node.p3 (positionArray [0], positionArray [1]) PositionArray [2] + t * space) isShadow & & ShadowNode.p3 (positionArray [0], positionArray [1], positionArray [2] + t * space)}}, finishFunc () {typeof fn = 'function' & & fn (node)}})}

The influence between objects

The rise and fall of the elevator will affect a lot of things, such as the movement of the frequency station with a conveyor belt and a medical box, here I use the sethost adsorption method (adsorption: the node specifies the host, and the host changes will affect the node).

Many scenes are very suitable, I need to lift the elevator with the medical box and the frequency station to rise together, and when the medical box is put on the conveyor belt, the medical box has to move. It feels like the real conveyor belt is driving the medical box to move.

The parameters to be explained here:

1.node (elevator element for operation)

2.medicalKit (medical kit)

3.fn (function for callback after animation)

4.status (elevator ascending and descending state)

5.config (Animation configuration)

/ / Elevator lift Animation elevatorAnim (node, medicalKit, fn, status, config) {const self = this / / get the elevator index to follow the corresponding frequency station const elevatorIndex = node.getTag (). Replace (/ [^ 0-9] / ig '')-0 / / get the distance of the elevator controlled by the index of the medical box const medicalKitIndex = medicalKit.getTag () .replace (/ [^ 0-9] / ig '')-0 const positionArray = node.p3 () const station = self.dm.getDataByTag (`station$ {elevatorIndex} `) / / adsorption host station.setHost (node) medicalKit.setHost (node) / / sets the rising and falling state if (elevatorIndex = 3) self.elevatorRunning = true / / when the lifting distance status is 0, it is the lowest falling position. The distance is fixed, so you only need to control the rising distance const medicalKitLevel = self.returnMedicalKitLevel (medicalKitIndex) / / the attribute of the elevator / / the position of the lowest point Lowest / / if there is a track, go to the position of the track, otherwise according to the number of floors orbitalP / / the position of the first floor distance let space const addSpace = medicalKitIndex = = 7? 100: 0 if (status = = 1) {space = config.orbitalP? Config.orbitalP: config.distance + addSpace + (400 * medicalKitLevel)} else {space = config.Lowest} / / the medical box will not do any action in the falling state if (status = 0) {medicalKit.setHost ()} return ht.Default.startAnim ({duration: config.orbitalP? 2000: (medicalKitLevel = 0 & & ElevatorIndex = = 3.700: 2500 + (medicalKitLevel * 1000)) Action (v, t) {node.p3 (positionArray [0], positionArray [1] + ((space-positionArray [1]) * t), positionArray [2])} FinishFunc () {station.setHost () typeof fn = = 'function' & & fn (node)}})}

Animation method

In the process of animation, there is a problem to deal with is waiting for the elevator animation, the medical box in the animation process, need to judge whether the elevator is rising, if not on the ground, need to wait.

My idea is that when the medical box is a little distance from the elevator, we need to determine whether the elevator is rising, and if so, we need to call the animation pause method.

When elevatorRunning is false, the elevator is not moving, otherwise it is in motion.

The elevator animation is set to true at the beginning, and the variable to false at the end, so that its status can be monitored.

The ht.Default.startAnim method returns an instance, uses the action method to poll and listen for the animation state, and then operates.

When elevatorRunning is true, use anim.pause () to pause the current animation.

When elevatorRunning is false, use anim.resume () to continue the current animation.

Const anim = ht.Default.startAnim ({duration, action (v, t) {node.p3 (positionArray [0], positionArray [1], positionArray [2]-(tpMax-positionArray [2]) * t) If (index > 1 & & self.elevatorRunning = = true) {if (node.p3 () [2] {if (self.elevatorRunning = false) {anim.resume (); clearInterval (t);}}, 100) }, finishFunc () {typeof fn = "function" & & fn ();}})

Event monitoring (publish, subscribe)

Because you need to monitor the end of a current animation, and then make a camera shift.

As shown in the picture, I need to monitor the end of the animation of the prompt text in the first 3D scene, and then perform the display of the second 3D scene. Because the two scenarios are different and cannot be monitored by callback, the eventBus event bus is used here.

Here is the use of eventBus. The first parameter represents the name of the registration function to listen for, and the second is the callback function.

/ / event bus listens for event eventbus.on ('animation1', _ = > {const medical = dm.getDataByTag (' medicalKit1') renderView (medical, dm, gv)})

The following is the use of eventBus emission, the first parameter represents the name of the function to be triggered, and the second is the argument emitted to the function.

/ / trigger event eventbus.emit ("animation1", null); these are all the contents of the article "how to implement Medical Logistics system in HTML5 WebGL". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.