New_DodgeBall

with orbitControls, XZgrid, info

by Bai Shiuan Huang

HTML

<div id="info">Dodege Ball
<button id='teach'>?</button>
<p id='v0value'></p>
<button id='reset'>Reset
</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://yuang2tank.github.io/Dodgeball/DodgeBall001.js"></script>
<script src="https://rawgit.com/jyunming-chen/tutsplus/master/js/text2D.js"></script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}
#teach{
  background-image: url(https://i.imgur.com/t9au5ab.png);
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
}
body {
  overflow: hidden;
}

JavaScript

class Agent_2D{
  constructor(pos, vel, team){
    this.pos = pos.clone();
    this.vel = vel.clone();
    this.team = team;
    this.force = new THREE.Vector3();
    this.target = new THREE.Vector3();
    this.stop = true;
    this.size = 4;  // physical size of the character
    this.mesh = new THREE.Mesh(new THREE.CylinderGeometry(4,4,1,20),new THREE.MeshBasicMaterial({color:0xff0000}));
  }
  step(dt){
    
    this.accumForce();

    // vel += force*dt
    var tmp = this.force.clone().multiplyScalar(dt);
    this.vel.add (tmp);  

    // velocity modulation by arriving
    var diff = new THREE.Vector3();
    diff.subVectors (this.target, this.pos);
    var dst = diff.length();
    if (dst < 20) {//ARRIVAL_R
      this.vel.setLength (dst);	
    }

    // pos += vel*dt
    tmp = this.vel.clone().multiplyScalar (dt);
    this.pos.add (tmp);
    if(this.team = 1){
      if(this.pos.x > -4) this.pos.x = -4;
      if(this.pos.x < -96) this.pos.x = -96;
      if(this.pos.z < -46) this.pos.z = -46;
      if(this.pos.z > 46) this.pos.z = 46;
    }
  }
  accumForce (){
    // clear force accumulator
    this.force.set (0,0,0);

    var sum = new THREE.Vector3(0,0,0);

    // seek
    var tmp = new THREE.Vector3();
    tmp.subVectors (this.target, this.pos);
    tmp.normalize().multiplyScalar(50);//MAXSPEED
    sum.subVectors (tmp, this.vel);

    // collision
    var vhat = this.vel.clone().normalize();
    
    let id = 0
    let minDis = 500;
    
    for(let i = 0 ; i < Ins.length; i++){
      if(Ins[i].haveBall == true) continue;
      let tmp = this.pos.distanceTo(Ins[i].mesh.position);
      if(minDis > tmp){
        minDis = tmp;
        id = i;
      }
    }
    //console.log('ID: ' + id)
    tmp.subVectors (Ins[id].mesh.position, this.pos); // c-p
    var tll = tmp.dot(vhat);

    if (tll > 0 && tll < 25) {//REACH
      vhat.multiplyScalar (tll);
      var tperp = new THREE.Vector3();
      tperp.subVectors (tmp, vhat);
      if (tperp.length() < 8) {
       ...