Next article

The last game features the main character of animation and control

A lot of work needs to be done before the next main character appears. The first step is to cut the main character

Distinguish between models that are in and out of the valid range

Place the valid range into the scene, and the model outside the valid range does free fall

Cutting mainly with threebSP

require(".. /utils/threebsp.js");Copy the code

Const threebsp = (window as any).threebsp

function ThreeBSP(treeIsh, matrix) {
    this.matrix = matrix;
    this.intersect = __bind(this.intersect, this);
    this.union = __bind(this.union, this);
    this.subtract = __bind(this.subtract, this);
    this.toGeometry = __bind(this.toGeometry, this);
    this.toMesh = __bind(this.toMesh, this);
    this.toTree = __bind(this.toTree, this);
    if (this.matrix == null) {
      this.matrix = new THREE.Matrix4();
    }
    this.tree = this.toTree(treeIsh);
  }
Copy the code

This is the source code of several methods encapsulated

Intersect processes the result to intersect

The result of union processing is union

Subtract the result from the first model is subtracted from the later model

Interested children can read the source code, the main vertex information calculation

Before performing the BSP calculation, the height of the base plate should be raised to the same height as that of the protagonist, otherwise there will be no intersection area forever

That’s about it.

The intersection calculation

The result is something like this

So you have to do two calculations one intersection to get the valid region and one subtraction to get the invalid region

Deal with the active area first

Const ThreeBSP = (window as any).ThreeBSP // Generate ThreeBSP object var leadBsp = new ThreeBSP(lead); var lastLeadBsp = new ThreeBSP(lastLead);Copy the code

This results in two BSP objects, leadBsp and lastLeadBsp

Crop and model material assignment

function handleBsp(firstBSP: any, secondBSP: any.type: string) {
  // subtract and cross
  var mesh
  if(type= = ='intersect') {
    mesh = firstBSP.intersect(secondBSP);
  }
  if (type= = ='subtract') {
    mesh = firstBSP.subtract(secondBSP);
  }

  // Convert the cropped module to object
  var intersectResult = mesh.toMesh();

  // Update the model's faces and vertices
  intersectResult.geometry.computeFaceNormals();
  intersectResult.geometry.computeVertexNormals();

  // Determine whether vertex information exists
  if (intersectResult.geometry.vertices.length > 0) {
    // Reassign a texture
    var material = new THREE.MeshNormalMaterial();
    intersectResult.material = material;
    return intersectResult
  }
}
Copy the code

The calculated result is returned to the initGame method for processing

const intersectResult = handleBsp(leadBsp, lastLeadBsp, 'intersect')
meshList.push(intersectResult)

Copy the code

The results obtained

The transparent area is the base plate of the elevation position

Next, deal with the excess (invalid areas)

The method is the same pass different parameters can be

Then through the effective area, the next hero will locate the size of the effective area

The next step is to clone a copy of the effective area as the protagonist of the next time

this.leadCube = meshArr[0].clone()
Copy the code

The previously calculated position relationship is then assigned to the cloned protagonist,

If odd numbers appear on the right, change the z-position, and if even numbers appear on the left, change the x-value

The y value is calculated in the same way as when the protagonist was first created

Let nextPosition = this. LeadCube. Position. Clone () / / odd number appear on the right side, modify the z value position, even appear on the left side, If (flag) {nextposition.setx (sx)} else {nextPosition.setz (sz)} nextposition.sety (y) this.leadCube.position.copy(nextPosition)Copy the code

Now we need to compute the end point

Similarly, if you come from the right hand side with an odd number, you don’t change your z value and if you come from the left hand side with an even number you don’t change your x value

The effect of stacking several times

So now we need to animate the invalid area (non-physical motion)

Freefall is a separate one, it’s pretty complicated, the game is nearing the end of development, the scorer, camera movement and other features are left

3D stacking game – The first basic initialization game

3D stacking game – The second step controls the main character to move and stop