homework8

by Millieyan

HTML

<div id="title">Hw 8 Demo</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://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>

CSS

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

body {
    overflow: hidden
}

JavaScript

var renderer, scene, camera, controls, keyboard = new KeyboardState();
var met, boxGeometry, cylinderGeometry, cylinderGeometry2, cylinderGeometry3, clock;
var base, turret, turn, cannon,muzzle;
var width, heightvar, grid, axes;
var shell=[];

var pos = new THREE.Vector3();
var speed = 0.0;

var baseAngle = 0.0, turretAngle = 0.0, turnAngle = 0.0;

(function() {
    Math.clamp = function(val, min, max) {
        return Math.min(Math.max(val, min), max);
    }
})();
class Shell{
	constructor(pos,vel){
	this.speed=25.0;
  this.V0=vel.clone().normalize().multiplyScalar(this.speed);
  console.log(this.V0);
  this.Vg=new THREE.Vector3(0,this.V0.y,0);
  this.pos=pos.clone();
  this.body=new THREE.Mesh(new THREE.SphereGeometry(1.5,32,32),new THREE.MeshNormalMaterial());
  this.body.position.copy(pos);
  scene.add(this.body);
}
update(dt) {
	this.Vg.sub(new THREE.Vector3(0,9.8,0).multiplyScalar(dt));
  var vel=this.V0.clone().add(this.Vg);
  this.pos.add(vel.clone().multiplyScalar(dt));
  this.body.position.copy(this.pos);
}
}
init();
animate();

function init() {

  renderer = new THREE.WebGLRenderer();
  clock = new THREE.Clock();
  document.body.appendChild(renderer.domElement);
  width = window.innerWidth;
  height = window.innerHeight;
  renderer.setSize(width, height);
  renderer.setClearColor(0x8888888);

  scene = new THREE.Scene();
  grid = new THREE.GridHelper(300, 30, 0x222222, 0x111111);
  scene.add(grid);
  axes = new THREE.AxisHelper(20);
  //scene.add(axes);

  camera = new THREE.PerspectiveCamera(35, width / height, 1, 10000);
  camera.position.y = 26;
  camera.position.x = 200;
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  met = new THREE.MeshNormalMaterial({
    transparent: true,
    opacity: 0.5,
    visible: true
  });
  boxGeometry = new THREE.BoxGeometry(40, 10, 20);
  cylinderGeometry = new THREE.CylinderGeometry(10, 10, 10, 30);
  cylinderGeometry2 = new THREE.CylinderGeometry(1.5, 1.5, 10, 30);
  cylinderGeometry3 = new...