發球

by k6e2n0t12

HTML

<div id="info">Volley Ball
  <br/>
    <button id="left" style="width:15%">left</button>
    <button id="right" style="width:15%">right</button>
  <br/>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://youtingkuo.github.io/volleyball/basicScene.js"></script>
<script src="https://youtingkuo.github.io/volleyball/ball.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var MAXSPEED = 5;
var ARRIVAL_R = 0.5;

var Agent = function (pos, vel) {
	this.pos = pos.clone();
	this.vel = vel.clone();
	this.force = new THREE.Vector3();
	this.target = new THREE.Vector3();
	this.mesh = new THREE.Mesh(new THREE.CylinderGeometry(0.4,0.4, 0.2, 32),new THREE.MeshLambertMaterial({
		side: THREE.DoubleSide,
    transparent: true,
		opacity :0.5,
		color: 0x00ffff
	}));
};

Agent.prototype.step = function (dt) 
{
	this.accumForce();
	
	// vel += force*dt
	var tmp = this.force.clone();
	tmp.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 < ARRIVAL_R) {
		this.vel.setLength (dst);	
	}
	
	// pos += vel*dt
	tmp.copy (this.vel);
	tmp.multiplyScalar (dt*1.5);
	this.pos.add (tmp); 
};


Agent.prototype.accumForce = function ()
{
	// 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();
	tmp.multiplyScalar (MAXSPEED);
	sum.subVectors (tmp, this.vel);

	// collision
	
	this.force.copy (sum);
}

var robot = function (scene){
	
	this.hitBallMachine = new THREE.Object3D();
	THREE.ImageUtils.crossOrigin = '';
	var bodyColor = THREE.ImageUtils.loadTexture('http://i.imgur.com/IfhDum9.jpg');
	var geometry = new THREE.CylinderGeometry(0.24, 0.24, 1.2, 32);
	var material = new THREE.MeshBasicMaterial({map: bodyColor});
	this.body = new THREE.Object3D();
	var mesh = new THREE.Mesh(geometry, material);
	mesh.position.set(0, 0.6, 0);
	this.body.add(mesh);
	this.hitBallMachine.add(this.body);
  
	geometry = new THREE.SphereGeometry(0.25, 32, 32);
	var head = new THREE.Mesh(geometry, material);
	head.position.set(0, 1.4, 0);
	this.body.add(head);
  	
	this.hitBallMachineHandLeft = new THREE.Object3D();
	this.body.add(this.hitBallMachineHandLeft);
	//this.hitBallMachineHandLeft.rotation.z =...