DodgeBall15_test_raycaster

by Bai Shiuan Huang

HTML

<div id="info">Dodege Ball
<br>使用QW選擇方向發射; 
<br>Press D or S to increase power; Release to shoot
<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
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, controls, raycaster;
var theta, theta2, pickables = [];
var clock, line;
var keyboard = new KeyboardState();
var Attack_IF, d_ball, Keeper, Catcher;
var Outs = [], Ins = [];
var InRunners = [];
var targetC;
var SpriteText2D = THREE_Text.SpriteText2D;
var textAlign = THREE_Text.textAlign;
var cameraPlayer, cpPos, cpPos_box = new THREE.Object3D();
///////////////////////////////////////////////

var agent;
var mouse = new THREE.Vector2(), plane;
//var tracer = new THREE.Vector3();

///////////////////////////////////////////////

class Agent_2D{
  constructor(pos, vel){
    this.pos = pos.clone();
    this.vel = vel.clone();
    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.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 =...