3D presentation of Box2DJS physical Engine Based on HT for Web, htbox2djs

3D presentation of Box2DJS physical Engine Based on HT for Web, htbox2djs

In the previous article, we presented the 3D pathfinding effect of a * Search Algorithm Based on HT for Web. In this article, we will use HT for Web 3D to present the collision effect of the Box2DJS physical engine, as shown in the previous article, Box2DJS is only a two-dimensional physical engine for plane collision, but it also allows users to experience collision effects more intuitively through 3D presentation. First, let's look at the final example:

Box2D was a demonstration example of Erin Catto at the GDC conference. Later, it was constantly improved into a C ++ Open-Source Physical engine library. Over the years, it has been derived from Java, ActionScript, JS, and other versions, it is widely used in the game field. Said its rich indeed rich, said chaos enough chaos, find a Box2D JS version has N multiple options, and different versions of the API are still different, can refer to the comparison here http://stackoverflow.com/questions/7628078/which-box2d-javascript-library-should-i-use

Although the version is a little messy, the basic principles of each version are similar to those of the API. The following is an example code written based on Box2DJS integrated with HT for Web. Box2D has many parameter functions. Here we only present the most basic and simple elements, mainly to let everyone understand the basic use of the Box2DJS engine, and how to combine the presentation with HT for Web.

function init() {dm = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dm);g3d.setGridVisible(true);g3d.addToDOM();g3d.setEye(100, 50, 150);// Define the worldvar gravity = new b2Vec2(0, -100);var doSleep = false;world = new b2World(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();}function createNode(p3, s3, dynamic, angle) {var node = new ht.Node();node.p3(p3);node.s3(s3);               node.setRotationZ(angle == null ? Math.PI * Math.random() : angle);dm.add(node);var fixDef = new b2FixtureDef();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;                    }var shape = new b2PolygonShape();shape.SetAsBox(s3[0] / 2, s3[1] / 2);fixDef.shape = shape;var bodyDef = new b2BodyDef();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 = 0function render() {count++;if(count % 10 === 0){createNode([-1, 50, 0], [10, 10, 10], true);}                world.Step(1 / 60, 10, 10);var list = world.GetBodyList();while (list) {                                              var node = list.m_userData;if(node){var position = 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 is the HT for Web Node object built in createNode. At the same time, it constructs the Box2D Body object and associates it with each other through the userData attribute. During the rendering process of requestAnimationFrame, first pass world. step (1/60, 10, 10); Update the internal operations of the physical engine, and traverse all Body elements to calculate the results, that is, information such as the Body position and rotation angle is synchronized to the Node object of HT for Web, so as to achieve the combination of HT for Web and Box2DJS.

In this example, when an object falls below-150, I will delete the corresponding data elements in Box2DJS and HT DataModel, and the selected elements will also be automatically deleted, count % 10 = 0 this is used to generate a new cube without 10 refreshes. Box2D can also play a lot of tricks. If there is a large amount of data, you can also consider to refer to the automatic 3D topology layout Web Workers Article to execute intensive computation of Box2DJS in WebWork, I have not evaluated the performance of the increase, the amount of data is large, WebWork and GUI thread data serialization transmission will also have a burden to pay attention to, the final example of 3D effect to play very interesting: http://v.youku.com/v_show/id_XODM0OTQ0NzEy.html