Box2djs physics engine rendering based on HT for WEB 3D

In this article, we present A * search algorithm 3D pathfinding effect based on the HT for Web, which we will use HT for Web 3D to present the collision effect of the Box2djs physics engine, in fact Box2djs is just two dimensional plane collision physics engine, But also through the 3D rendering can give a more intuitive experience of the collision effect, first, the final example:

Box2D is the first Erin Catto in the GDC conference, a showcase example, and then constantly improve into C + + Open source Physics engine Library, these years derived from Java, ActionScript and JS and other versions, is widely used in the game field. Said its rich is indeed very rich, said chaos is messy enough, to find a box2d JS version has n many choices, and different versions of the API there are differences, can refer to the comparison here http://stackoverflow.com/questions/7628078/ Which-box2d-javascript-library-should-i-use

Although the version is a bit messy, but the basic principles of the various versions and APIs are similar, the following is my example code based on BOX2DJS Fusion HT for Web write. Box2D has a lot of parameter function points, here we only present the most basic simple elements, mainly let us understand the basic use of the Box2djs engine, and how to show on how to combine with the HT for Web.

functioninit () {DM=Newht.    Datamodel (); G3d=NewHt.graph3d.Graph3dView (DM); G3d.setgridvisible (true);    G3d.addtodom (); G3d.seteye (100, 50, 150); //Define the World    varGravity =NewB2VEC2 (0,-100); varDosleep =false; World=NewB2world (Gravity, dosleep); CreateNode ([0,-3, 0], [100, 6, 100],false, 0); CreateNode ([-100,-50, 0], [400, 6, 100],false,-MATH.PI/8); CreateNode ([100,-50, 0], [50, 6, 100],false, MATH.PI/6);CreateNode ([1, 50, 0], [10, 10, 10],true); CreateNode ([-1, 90, 0], [10, 10, 10],true); Render ();}functionCreateNode (P3, s3, dynamic, angle) {varnode =Newht.    Node ();    NODE.P3 (p3);                   NODE.S3 (S3); Node.setrotationz (Angle==NULL? Math.PI *math.random (): angle);    Dm.add (node); varFixdef =Newb2fixturedef (); if(dynamic) {fixdef.density= 0.5; Fixdef.friction= 0.5; Fixdef.restitution= 0.5; NODE.S ({' All.color ': ' Red ',            ' Batch ': ' Dynamic '        }); } Else{fixdef.density= 0.0; }    varShape =NewB2polygonshape (); Shape. Setasbox (s3[0]/2, s3[1]/2); Fixdef.shape=shape; varBodydef =Newb2bodydef (); Bodydef.type= dynamic?B2Body.b2_dynamicBody:b2Body.b2_staticBody; BodyDef.position.Set (p3[0], p3[1]); Bodydef.angle=Node.getrotationz (); Bodydef.userdata=node; World. Createbody (Bodydef). Createfixture (fixdef);} Count= 0functionrender () {Count++; if(count% 10 = = = 0) {CreateNode ([-1, 50, 0], [10, 10, 10],true); } world. Step (1/60, 10, 10); varList =World .    Getbodylist ();  while(list) {varnode =List.m_userdata; if(node) {varPosition =list.            GetPosition (); if(POSITION.Y <-150 | |g3d.isselected (node))                {Dm.remove (node); World.            Destroybody (list); }Else{node.p3 (position.x, POSITION.Y,0); Node.setrotationz (list.                                        Getangle ()); }} List=list.    GetNext (); } requestanimationframe (render);}

The above code builds the HT for Web node object in CreateNode, while building the box2d body object and associating it with the UserData attribute, in the Requestanimationframe rendering process, first through the world. Step (1/60, 10, 10); Update the internal operation of the physics engine, and then traverse all body elements to synchronize the results of the operation, i.e., the body position and rotation angle, to the HT for Web node object, thus achieving the HT for The combination of web and BOX2DJS.

In the example, the object drops below 150 i delete the corresponding data element in the BOX2DJS and HT Datamodel, and the selected entity automatically deletes the entity, count% 10 = = 0 This is used to create a new cube without 10 refreshes. Box2D can also play a lot of tricks, if the data is large can also consider referring to the 3D topology automatic layout of the Web workers, the box2djs of dense operations in webwork execution, I did not evaluate the performance of the increase in the range, Data serialization of WebWork and GUI threads is also a burden to note when the volume is large, and the final example 3D effect is fun to play: http://v.youku.com/v_show/id_XODM0OTQ0NzEy.html

Box2djs physics engine rendering based on HT for WEB 3D