shoot

by Bai Shiuan Huang

HTML

<div id="info">parabola
<br>Press 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/89/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>
<script src="https://code.jquery.com/jquery-2.1.4.min.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;
var h, L0, v0, theta;
var clock;
var pos, vel, force, start, img = 0;
var increaseV0 = false;
var shootStart = false;
var time = 0;

init();
animate();

$('#reset').click (function() {
	pos.set (-L0, h, 0)
  start.position.copy (pos)
  shootStart = false
})

function init() {

	scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 100;
  //camera.position.x = 50;
  
  let gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXZ);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  document.body.appendChild(renderer.domElement);
  
  ///////////////////////////////////////////////////////////
	h = 10;
  L0 = 20;
  v0 = 25;
  g = 10;
  theta = Math.PI/6; // 30 deg
  
  let line = makeParabola();
  scene.add (line)

	let normalMat = new THREE.MeshNormalMaterial();
  start = new THREE.Mesh(new THREE.SphereGeometry(2,20,20), normalMat );
  scene.add(start);
  start.position.set (-L0, h, 0)
  
  /////////////////
  clock = new THREE.Clock();
  pos = new THREE.Vector3();
  vel = new THREE.Vector3();
  force = new THREE.Vector3(0,-g,0);

	/////////////////
  document.addEventListener('mousedown', onMouseDown, false);
  document.addEventListener('mouseup', onMouseUp, false);  
}

function onMouseDown() {
  //v0 = 5
  increaseV0 = true
}

function onMouseUp() {
  if(time > 0) return;
  time++;
  increaseV0 = false;
  shootStart = true;
  pos.copy (start.position);
  vel.set (v0*Math.cos(theta), v0*Math.sin(theta),0);
  clock.getDelta();  // get the FIRST delta
}

function makeParabola() {
  let tStar = ( v0*Math.sin(theta) + Math.sqrt(v0*v0*Math.sin(theta)*Math.sin(theta) + 2*g*h) )/g;
	let N = 30;
  let dt = tStar/N;
  let geometry = new THREE.Geometry();
  for (let t = 0; t...