ANA_HW2

by jason870509

HTML

<div id="info">THREE.JS 2D Template
  <br>Right clicks to draw line
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var renderer, scene, camera;
var points = [], index = 0, twoabc = [], pointAB = [];

init();
animate();

function init() {
	
	renderer = new THREE.WebGLRenderer();
	document.body.appendChild (renderer.domElement);
	renderer.setSize (window.innerWidth, window.innerHeight);
	renderer.setClearColor (0x888888);
	
	scene = new THREE.Scene();
	grid = new THREE.GridHelper(200,20,'red','white');
	grid.rotation.x = Math.PI/2;
	scene.add (grid);
	
	camera = new THREE.OrthographicCamera (-100,100,100,-100, -10,10);
	///////////////////////////////////
	var circle = drawCircle (46);
	scene.add (circle);
	circle.position.set (15, -15, 0);
	
	document.addEventListener ('mousedown', doMouseDown, false);
}

function doMouseDown(event) {

  event.preventDefault();
  let mouseX = (event.clientX / window.innerWidth) * 2 - 1;
  let mouseY = -(event.clientY / window.innerHeight) * 2 + 1;

  // [mouseX, mouseY] in [-1,1]x[-1,1]
  var dot = new THREE.Mesh (new THREE.CircleGeometry(2,20), new THREE.MeshBasicMaterial({color:'cyan'}));
  scene.add (dot);
  dot.position.set (mouseX*100, mouseY*100, 0);
  
  var point = new THREE.Vector3 (mouseX*100, mouseY*100, 0);
  points.push (point);
  
  //console.log (points.length + ' points added');
  if (points.length == 2) {
  	var line = drawLine (points[0], points[1]);
    scene.add (line);
    points = [];
  }
    
}

function drawLine (vec1, vec2) {
	var abc = findABC (vec1.x, vec1.y, vec2.x, vec2.y);
	var a = abc[0], b = abc[1], c = abc[2];
  pointAB[index + 0] = vec1.x;
  pointAB[index + 1] = vec1.y;
  pointAB[index + 2] = vec2.x;
  pointAB[index + 3] = vec2.y;
/* 
  twoabc[index+0] = a;
  twoabc[index+1] = b;
  twoabc[index+2] = c;
*/
  index += 4;
  if(index == 8){
  	var intersection = Intersection(pointAB);
    if(intersection != false){
      var intersectionDot = new THREE.Mesh (new THREE.CircleGeometry(3,20), new THREE.MeshBasicMaterial({color:'white'}));
      scene.add (intersectionDot);
      var x1 = intersection[0];
      var y1...