collision_bb4ac_last

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 CCD(b2, rr, hh){
  if(!CCD.b1){
    CCD.b1 = b2;
    return false;
  }
  let b1x_2 = CCD.b1.x * CCD.b1.x, b1y_2 = CCD.b1.y * CCD.b1.y, b1z_2 = CCD.b1.z * CCD.b1.z;
  let b2x_2 = b2.x * b2.x, b2y_2 = b2.y * b2.y, b2z_2 = b2.z * b2.z;
  //(b2z^2-2*b1z*b2z+b92x^2-2*b1x*b2x+b1z^2+b1x^2)
  let a = b2z_2 - 2*CCD.b1.z*b2.z + b2x_2 - 2*CCD.b1.x*b2.x + b1z_2 + b1x_2;
  //(2*b1z*b2z+2*b1x*b2x-2*b1z^2-2*b1x^2)
  let b = 2*CCD.b1.z*b2.z + 2*CCD.b1.x*b2.x - 2*b1z_2 - 2*b1x_2;
  //-r^2+b1z^2+b1x^2
  let c = -1*rr*rr + b1z_2 + b1x_2;
  let discriminant = b*b - 4*a*c;
  console.log('Discriminant: ' + discriminant);  
  if(discriminant<0){
    CCD.b1 = b2;
    return false;
  }
  let qrt = Math.sqrt(discriminant);
  
  let t = (-b - qrt)/(2*a);
  let test = CCD.b1.clone().multiplyScalar(1-t).add(b2.clone().multiplyScalar(t)).y;
  if( test <= hh && test >= 0 && t <= 1 && t >= 0){
    CCD.b1 = b2;
    return true;
  }
  t = (-b + qrt)/(2*a);
  test = CCD.b1.clone().multiplyScalar(1-t).add(b2.clone().multiplyScalar(t)).y;
  if( test <= hh && test >= 0 && t <= 1 &&t >= 0){
    CCD.b1 = b2;
    return true;
  }
  else{
    CCD.b1 = b2;
    return false;
  }
}
function makePlayer(){
  let all = new THREE.Object3D();
  let face = new THREE.Object3D();
  let head = new THREE.Mesh(new THREE.BoxGeometry(4, 4, 4), new THREE.MeshNormalMaterial());
  let eye = new THREE.Mesh(new THREE.BoxGeometry(5, 1, 4), new THREE.MeshNormalMaterial());
  eye.position.x = 0.5;
  face.add(head, eye);
  face.position.set(0, 14, 0)
  let body = new THREE.Mesh(new THREE.BoxGeometry(2, 12, 4), new THREE.MeshNormalMaterial())
  let arm = new THREE.Object3D();
  let...