HW3P_3

with orbitControls, XZgrid, info

by k6e2n0t12

HTML

</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<div id="info">HW3P_Part3
    <br/> 
    <a href="javascript:slover(0);">Newton</a>
    <a href="javascript:slover(1);">bisection</a>
</div>
<div id="dataShow"></div>

CSS

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ffff00
}
a {
    color: white;
}
#dataShow {
    position: absolute;
    bottom: 20px;
    width: 100%;
    padding:5px;
    text-align: center;
    color: #00ffff;
}
body {
    overflow: hidden;
}

JavaScript

var camera, scene, renderer, border;
var lineGroup,lineGroup2, q0, q1,q2,q3;

var coef = [10, 9, 8, 7, 6, 5, 20];
var p1x, p1y, t1x, t1y, p2x, p2y, t2x, t2y, a=20,b=10;
var maxLoop = 100;
var modeNow=0;

init();
animate();
function slover(option){
    if(option===0)
        modeNow=0;
    else
        modeNow=1;
}
function TwoPointLine (x0, x1,x2,x3) {
    lineGroup = new THREE.Object3D();

	// build the line
    var geometry = new THREE.Geometry();
    geometry.vertices.push (x0.clone(), x1.clone());
    lineGroup.add (new THREE.Line (geometry, new THREE.LineBasicMaterial()));

    var geometry2 = new THREE.Geometry();
    geometry2.vertices.push (x2.clone(), x3.clone());
    lineGroup.add (new THREE.Line (geometry2, new THREE.LineBasicMaterial()));
	
    // add two end points
    var point;
    point = new THREE.Mesh(new THREE.CircleGeometry(1, 12), new THREE.MeshBasicMaterial());
    point.position.copy(x0);
    lineGroup.add(point);
    point = new THREE.Mesh(new THREE.CircleGeometry(1, 12), new THREE.MeshBasicMaterial());
    point.position.copy(x1);
    lineGroup.add(point);
	point = new THREE.Mesh(new THREE.CircleGeometry(1, 12), new THREE.MeshBasicMaterial());
    point.position.copy(x2);
    lineGroup.add(point);
	point = new THREE.Mesh(new THREE.CircleGeometry(1, 12), new THREE.MeshBasicMaterial());
    point.position.copy(x3);
    lineGroup.add(point);
    
    var p1=x0, t1=x1.clone().sub(x0), p2=x3, t2=x3.clone().sub(x2);
    var s, s2, s3, h1, h2, h3, h4;
    var pt = new THREE.Vector3();
    var material = new THREE.LineBasicMaterial({
        color: 0xffff00 // yellow
    });

    var geometry3 = new THREE.Geometry();
    for (s = 0; s <= 1; s += 0.1) {
        s2 = s * s;
        s3 = s2 * s;
        h1 = 2 * s3 - 3 * s2 + 1;
        h2 = -2 * s3 + 3 * s2;
        h3 = s3 - 2 * s2 + s;
        h4 = s3 - s2;

        pt.set(0, 0, 0);
        pt.add(p1.clone().multiplyScalar(h1));
        pt.add(p2.clone().multiplyScalar(h2));
       ...