collision_TEST

by Bai Shiuan Huang

HTML

<div id="info">cylinder-sphere CONTINUOUS collision 
<br><input type=range min=0 max=50 value = 40 id='move'> interpolate <br>
</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://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, light, controls;
//var keyboard = new KeyboardState();
var ball, ball1, ball2, cylinder;
var R = 3; // ball radius
var r = 10; // cylinder radius
var h = 20; // cylinder height

$('#move').change (function() {
	ball.position.lerpVectors (ball1.position, ball2.position, $(this).val()/50)
});

init();
animate();
function hit_continuous(b1, b2, rr, hh){
  let b1x_2 = b1.x * b1.x, b1y_2 = b1.y * b1.y, b1z_2 = b1.z * b1.z;
  let b2x_2 = b2.x * b2.x, b2y_2 = b2.y * b2.y, b2z_2 = b2.z * b2.z;
  let discriminant = (b2z_2 - 2*b1.z*b2.z + b2x_2 - 2*b1.x*b2.x + b1z_2 + b1x_2)*rr*rr - b1x_2*b2z_2 + 2*b1.x*b1.z*b2.x*b2.z - b1z_2*b2x_2;
  console.log('Discriminant: ' + discriminant);  
  if(discriminant<0) return false;
  let qrt = Math.sqrt(discriminant);
  
  let t1 = -(qrt + b1.z*b2.z + b1.x*b2.x - b1z_2 - b1x_2)/(b2z_2 - 2*b1.z*b2.z + b2x_2 - 2*b1.x*b2.x + b1z_2 + b1x_2);
  console.log('t1: ' + t1);
  let test = b1.clone().multiplyScalar(1-t1).add(b2.clone().multiplyScalar(t1)).y;
  if( test <= hh && test >= 0) return true;
  let t2 = (qrt - b1.z*b2.z - b1.x*b2.x + b1z_2 + b1x_2)/(b2z_2 - 2*b1.z*b2.z + b2x_2 - 2*b1.x*b2.x + b1z_2 + b1x_2);
  console.log('t2: ' + t2);
  test = b1.clone().multiplyScalar(1-t2).add(b2.clone().multiplyScalar(t2)).y;
  if( test <= hh && test >= 0) return true;
  else return false;
}
function ballsCylinderInter () {
	let u = new THREE.Vector3();
  let v = new THREE.Vector3();
  u.set (ball2.position.x - ball1.position.x, 0, ball2.position.z - ball1.position.z)
  v.set (cylinder.position.x - ball1.position.x, 0,
  				cylinder.position.z - ball1.position.z)
 	let dd = u.sub(u.clone().projectOnVector(v)).length();
  console.log ('dd: ' + dd)
  if ( u.sub(u.clone().projectOnVector(v)).length() > r+R ) return

	if (ball1.position.y > h+R && ball2.position.y > h+R) return
	if (ball1.position.y < h+R && ball2.position.y < h+R) alert ('hit')
  
	// (1-t)*b1y + t*b2y = h+R
  // [consider divide-by-zero]
  
  let t = (h+R -...