Collision detection based on 2D3D first-person roaming developed by HTML5 and WebGL

In order to achieve a small game based on HTML5 scene, I used HT for Web to achieve, just 200 lines of code, I can use “first person” to operate forward and backward, up, down, left and right, and achieve collision detection.

First look at the effect of the implementation: http://hightopo.com/guide/guide/core/3d/ht-3d-guide.html#ref_collision

Or v.youku.com/v_show/id_X… The problem of the frames in the video is my screen recorder, which will not happen when I actually operate it. I suggest using the above link to operate it by myself, either with mouse or touch screen, but I think the most convenient is to operate the keyboard WSAD to control up, down, left and right.

                

My idea is to lay out the scene first with the following code:

createHT([100, -20, 100], '#E74C3C');                  
createHT([-100, -20, 100], '#1ABC9C');                    
createHT([100, -20, -100], '#3498DB');                   
createHT([-100, -20, -100], '#9B59B6');   
createCurve([0, -20, 0]);
createCircle();Copy the code

CreateHT (createHT); createHT (createHT); createHT (createHT); CreateCurve is the yellow curve that draws the middle of the scene; CreateCircle draws the outermost circle, which is also dotted because it is not an all-encompassing circle.

Ht. Shape is a component that can be used to draw shapes based on their stroke points. SetPoints (pointsArray) can be used to add all points to an array and set to Shape. Then setSegments() is used to set the information of the line segment array, that is, how to connect the two points, which is described in Shape manual. If you are interested, please refer to HT for Web Shape manual. Take one of the functions that delineates a point:

function createHT(p3, color){
    shape = new ht.Shape();                
    shape.s({
        'shape.background': null,
        'shape.border.width': 10,
        'shape.border.color': color,
        'all.color': color
    });
    shape.setTall(40);
    shape.setThickness(5);
    shape.setPoints([                    
        // draw H
        {x: 20, y: 0},
        {x: 20, y: 100},
        {x: 20, y: 50},
        {x: 80, y: 50},
        {x: 80, y: 0},
        {x: 80, y: 100},

        // draw T
        {x: 120, y: 0},
        {x: 180, y: 0},
        {x: 150, y: 0},
        {x: 150, y: 100}                    
    ]);                                
    shape.setSegments([
        // draw H
        1, // moveTo
        2, // lineTo
        1, // moveTo
        2, // lineTo
        1, // moveTo
        2, // lineTo

        // draw T
        1, // moveTo
        2, // lineTo
        1, // moveTo
        2 // lineTo
    ]);                
    shape.p3(p3);
    dataModel.add(shape); 
    return shape;
}Copy the code

The code looks a bit big because the word “HT” has a lot of points to draw, and you’d be surprised to see how to draw an incomplete circle in 20 lines of code, including styles:

shape = new ht.Shape();                
shape.s({
    'shape.background': null,
    'shape.border.width': 10,
    'shape.border.color': '#D26911',
    'all.color': '#D26911'
});
shape.setTall(40);
shape.p3(0, -20, 0);
shape.setThickness(10);
                
var r = 300;
for(var i=0; i<36; i++){
    var angle = Math.PI * 2 * i / 36;
    shape.addPoint({
        x: r * Math.cos(angle),
        y: r * Math.sin(angle)
    });
}
                
dataModel.add(shape); 
return shape;Copy the code

After setting up the scene, the next step is to display the position of “ME” in 3D in 2D. First I need to set “I” to “first person Roaming mode” and just go to g3d.setFirstPersonMode(true). The first person roaming mode essentially controls eye and Center. If the first person roaming mode is not set, the mouse or trackpad drag will rotate around center. See the HT for Web 3D manual for details.

HT 3D is encapsulated with two methods, getEye and getCenter. These two methods are to obtain the location of camera and the location of target center respectively. The former is like a camera on your head, where you go, its center will take pictures, which can easily record your position. The latter is the position where you look out, but this is not the same as us, because people can see in a wide range, but this center is the position of a point in front of you, which is the focus of your eyes.

Now that we know about getEye and getCenter, we can get the current position and line of sight:

g2d.addTopPainter(function(g){ var eye = g3d.getEye(), center = g3d.getCenter(); g.fillStyle = 'red'; g.strokeStyle = 'black'; g.lineWidth = 1; g.beginPath(); g.arc(eye[0], eye[2], 12, 0, Math.PI * 2, true); // Draw a circle, and also get the position of "I" in 3D in real time. g.stroke(); g.strokeStyle = 'black'; g.lineWidth = 2; g.beginPath(); g.moveTo(eye[0], eye[2]); g.lineTo(center[0], center[2]); G.stroke (); g.stroke(); g.stroke(); });Copy the code

In the code, we find that this method is only drawn once, and the position and movement of the 2d interface “I” will not change if we do not keep redrawing, so we also listen for the change of 3d properties:

G3d. Mp (function (e) {/ / according to the "I" on the 3 d location and the line of sight to real-time update 2 d interface if (e.p roperty = = = 'eye' | | e.p roperty = = = 'center') {/ / if e attribute changes to get/setEye, Get /setCenter, then redraw the 2D interface g2d.redraw(); }});Copy the code

Copy the code

In 2D, I can edit an pixel, move its points, change the size of an pixel, and so on. Whenever I change an pixel, my crash test will have to be updated:

function updateBoundaries(){ boundaries = []; dataModel.each(function(data){//HT curve circle boundaries = boundaries.concat(ht.Default.toBoundaries(data.getPoints(),  data.getSegments())); // ht.default. toBoundaries Convert the discontinuous curves to Graph3dView#setBoundaries(bs) {); g3d.setBoundaries(boundaries); //setBoundary() specifies the collision boundary}Copy the code

Copy the code

So what we’re curious about is, how do we maintain collision detection while dragging and dropping primitives to change size?

One of HT for properties change of surveillance addDataPropertyChangeListener (), can be abbreviated to md (), when we drag the primitives, map the yuan based points will be changed, so we just monitoring points have be changed, How to use this event can you refer to the HT for Web Data Model manual

Datamodel. md(function(e){if(e.perty === 'points'){datamodel. md(function(e){if(e.perty === 'points'){ So updateBoundaries updateBoundaries(); }});Copy the code