hw4 prototype

seek

by YouTingKuo

HTML

<div id="info">hw4 
  <br/>
    <button id="steer" style="width:15%">Group Steer</button>
    <button id="random" style="width:15%">random</button>
  <br/>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/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://rawgit.com/jyunming-chen/tutsplus/master/js/text2D.js"></script>
<div id="steerShow"></div>
<div id="randomShow"></div>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

#steerShow {
    position: absolute;
    bottom: 20px;
    font-size: 20px;
    width: 100%;
    padding:5px;
    text-align: center;
    color: #ffff00;
}
#randomShow {
    position: absolute;
    bottom: 0px;
    font-size: 20px;
    width: 100%;
    padding:5px;
    text-align: center;
    color: #ffff00;
}

JavaScript

var camera, scene, renderer, controls;
var puck;
var agent;
var angle = 0;
var targetCatch = false;
var targetOmega = 0.3;
var agents = [];
var obstacles = [];
var sprite = [];
var GsteerIsOn = true;
var randomIsOn = false;
var steerShow, randomShow;
var SpriteText2D = THREE_Text.SpriteText2D;
var textAlign = THREE_Text.textAlign;

var mass = 1;
var clock = new THREE.Clock();

var raycaster;
var mouse = new THREE.Vector2();
var pickables = [];

//agent
var ARRIVAL_R = 15;

var Agent = function(mesh, initPos) {
  this.pos = new THREE.Vector3();
  if (initPos) this.pos.copy(initPos);

  this.vel = new THREE.Vector3();
  this.force = new THREE.Vector3();
  this.target = new THREE.Vector3();
  this.angle = 0;
  this.mesh = mesh.clone();
  scene.add(this.mesh);
  this.maxSpeed = 60;
  this.maxForce = 60;
  this.nbhd = [];  // array for neighborhood
  this.sprite = new SpriteText2D('seek', {
    align: textAlign.center,
    font: '20px Courier',
    fillStyle: '#000000',
    antialias: true
  });
  this.sprite.position.copy(this.pos);
  this.sprite.scale.set(.3, .3, .3);
  this.sprite.position.y += 20;
  scene.add(this.sprite);
}

Agent.prototype = {
	update: function(dt) {
    // compute force
    this.force = this.target.clone().sub(this.pos).setLength(this.maxSpeed).sub(this.vel);

		// collision avoidance
    // (for each obstacle)
    
    for(var i = 0; i < obstacles.length; i++) {
    	var tmp = obstacles[i].center.clone().sub(this.pos);
      tmp.y = 0;
    	var tmpProj = tmp.clone().projectOnVector(this.vel);
    
    	if (tmp.clone().dot(this.vel) > 0) {
    		if (tmpProj.clone().sub(tmp).length() < obstacles[i].radius + 5) {
      		this.sprite.text = 'block';
      		if (tmpProj.length() < 5 *this.vel.length()) {
        		//console.log ('block & close');
    				this.force.add (tmpProj.clone().sub(tmp).multiplyScalar(3));
            //this.sprite.fillStyle = '#ffff00';
        	}
      	}
        else this.sprite.text = 'seek';
    	}
    }

    // force...