NA_HW3p

by ikatyang

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<div id="info">HW3p</div>
<span id='rlt'>#Timer</span>
<div id='btn'>
    <a id='b' href='javascript:hcTester(0);'>Bisection</a>
    <a id='n' href='javascript:hcTester(1);'>Newton</a>
    <a href='javascript:toggle(0);'>Rotate</a>
</div>

CSS

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ffff00
}
body {
    overflow: hidden;
}
#btn {
    position: absolute;
    bottom: 0;
    padding: 10px;
    width: 100%;
    text-align: center;
}
#rlt {
   position: absolute;
   float: left; 
    padding: 10px;
}

JavaScript

var camera, scene, renderer;
var mouse = new THREE.Vector2();
var cameraLeft = -50,
    cameraRight = 50,
    cameraTop = 50,
    cameraBottom = -50,
    cameraNear = -10,
    cameraFar = 10;

var r = 30;
var rLo = 25;
var rHi = 35;
var maxIter = 20;
var eps = 1e-5;
var pts = [];
var curve;
var isAnimated = false;
var cleanGroup = [];
var useMode = 0;

init();
animate();

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

    camera = new THREE.OrthographicCamera(cameraLeft, cameraRight, cameraTop, cameraBottom, cameraNear, cameraFar);
    camera.position.z = 10;
    scene.add(camera);

    // draw border
    var material = new THREE.LineBasicMaterial({
        color: 0x0000ff
    });

    var geometry = new THREE.Geometry();
    geometry.vertices.push(
        new THREE.Vector3(-40, -40, 0),
        new THREE.Vector3(40, -40, 0),
        new THREE.Vector3(40, 40, 0),
        new THREE.Vector3(-40, 40, 0),
        new THREE.Vector3(-40, -40, 0)
    );

    var border = new THREE.Line(geometry, material);
    scene.add(border);
    
    var material = new THREE.LineBasicMaterial({
        color: 0xffffff // yellow
    });
    var geometry1 = new THREE.Geometry();
    var geometry2 = new THREE.Geometry();
    var pt = new THREE.Vector3();
    for (var i = 0; i <= 360; i++) {
        var x1 = rLo * Math.cos(i / 180 * Math.PI);
        var y1 = rLo * Math.sin(i / 180 * Math.PI);
        
        pt.set(x1, y1, 0);        
        geometry1.vertices.push(pt.clone());
        
        var x2 = rHi * Math.cos(i / 180 * Math.PI);
        var y2 = rHi * Math.sin(i / 180 * Math.PI);
        
        pt.set(x2, y2, 0);        
        geometry2.vertices.push(pt.clone());
    }
    scene.add(new THREE.Line(geometry1, material));
    scene.add(new THREE.Line(geometry2, material));
	
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x888888);

    document.body.appendChild(renderer.domElement);
   ...