Tank(HW)

by 蔡 育曄

HTML

<div id="info">Tank<br>
  <button id='start'>start</button>
  <button id='clear'>claer</button>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/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>

CSS

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

JavaScript

class Ball {
	constructor() {
  	this.pos = new THREE.Vector3();
  	this.vel = new THREE.Vector3();
  	this.force = new THREE.Vector3(0, -10, 0);
  }
  
	setPos(pos) {
  	this.pos = pos;
 }
  
   getPos(){
    	return this.pos;
   }
   
  update(dt) {
		this.pos.add(this.vel.clone().multiplyScalar(dt));
  	this.vel.add(this.force.clone().multiplyScalar(dt));
  	if(this.pos.y<0){
  		this.pos.y =0;
    	this.stopped = true;
  	}
	}
  getIsStopped() {
  	return this.stopped === true ? true:false;
  }
  start() {
		this.stopped =false;
    var cannonWordPos = new THREE.Vector3();
    var turnWordPos = new THREE.Vector3();
    cannon.getWorldPosition(cannonWordPos);
    turn.getWorldPosition(turnWordPos)
  	this.vel.set(cannonWordPos.x-turnWordPos.x,cannonWordPos.y-turnWordPos.y,cannonWordPos.z-turnWordPos.z).normalize().multiplyScalar(35);
	}
}

var randerer, camera, controls, scene, axes;
var keyboard = new KeyboardState();
var turn, turret, tank, cannon, target;
var theta1 = 0, theta2 = Math.PI/18 , theta3 = 0, x = 0, z = 0;
var balls, ballMeshes,toggle = false;
var camera3rd,  light, angle = 0;
init();
animate();

$('#clear').click(function() {
	while(balls.length){
  	scene.remove(ballMeshes[balls.length-1]);
    ballMeshes.pop();
    balls.pop();
  }
  while(targets.length) {
 	  scene.remove(targets[targets.length-1]);
  	targets.pop();   
  }
  if(target){
	scene.remove(target);
	toggle = !toggle;
	}
})

$('#start').click(function() {
	if(!toggle){
  	buildTarget();
    toggle = !toggle;
  }
	
})

function buildHead() {
	turret = new THREE.Object3D();
  turn = new THREE.Object3D();
	var material = new THREE.MeshLambertMaterial({color:0x3e9ed6});
	var turretMesh = new THREE.Mesh(new THREE.CylinderGeometry(10,10,10,48),material);
  var turnMesh = new THREE.Mesh(new THREE.CylinderGeometry(1.5,1.5,10,48),material);
  cannon = turnMesh.clone();
  cannon.rotation.x = Math.PI/2;
  cannon.position.z = -5;
  turn.position.z = -10;
  turnMesh.rotation.z = Math.PI/2;
 ...