osculating circle

by Rebecca Chen

HTML

<div id="info">osculating circle
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.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, mesh, controls;
var p0ball, p1ball, p2ball;
var p0, p1, p2;
var c, R, axis, angle;
var sign = 1, yy = 0;

init();
animate();

function findOsculating() {
	var q0, q1, n;
console.log (p1);

	q0 = p0.clone().add(p1).multiplyScalar (0.5);
	q1 = p1.clone().add(p2).multiplyScalar (0.5);
	n = new THREE.Vector3();
  var v0 = new THREE.Vector3();
  var v1 = new THREE.Vector3();
  n.crossVectors (p1.clone().sub(p0), p2.clone().sub(p0)).normalize();
  v0.crossVectors (n, p0.clone().sub(p1));
  v1.crossVectors (n, p1.clone().sub(p2));
  var p0Mp1 = p0.clone().sub(p1);
  var q1Mq0 = q1.clone().sub(q0);
  var s = - p0Mp1.dot(q1Mq0)/v1.dot(p0Mp1);
  c  = v1.clone().multiplyScalar(s).add(q1);
  R = c.distanceTo (p0);
    
  var localDir = new THREE.Vector3(0,0,1);
  axis = new THREE.Vector3();
  axis.crossVectors (localDir, n).normalize();
  angle = localDir.angleTo (n);
}

function init() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 500;
  scene.add(camera);

  light = new THREE.PointLight(0xffffff);
  light.position.set(100, 300, 200);
  scene.add(light);

  var gridXZ = new THREE.GridHelper(100, 10, '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);
  ////////////////////////////////////////////////////////////////////////

  var geometry = new THREE.SphereGeometry(5, 20, 20);
  var material = new THREE.MeshNormalMaterial();

  ball = new THREE.Mesh(geometry, material);
  p0ball = ball.clone();
  p1ball = ball.clone();
  p2ball = ball.clone();
  scene.add(p0ball);
  scene.add(p1ball);
  scene.add(p2ball);

	p0 = new THREE.Vector3 (20, 0, 60);
  p1 = new THREE.Vector3 (0,20,0);
  p2 = new THREE.Vector3 (10,...