Rotating TwoPointLine

with orbitControls, XZgrid, info

by pkin159

HTML

<div id="info">Rotate TwoPointLine
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.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, border;
var lineGroup, q0, q1, root;
var pos = new THREE.Vector3();

init();
animate();

function solve (p0x,p0y, p1x,p1y) {
    var a = p1y*p1y - 2*p0y*p1y + p1x*p1x - 2*p0x*p1x + p0y*p0y + p0x*p0x;
    var b = 2*p0y*p1y + 2*p0x*p1x - 2*p0y*p0y - 2*p0x*p0x;
    var c = p0y*p0y + p0x*p0x - 100;
    var root1 = (-b + Math.sqrt (b*b - 4*a*c))/2/a;
    if (0 < root1 && root1 < 1)
        return root1;
    else
        return a/c/root1;
}

function unitCircle () {
    var point = new THREE.Vector3();
    var geometry = new THREE.Geometry();
    var dq = 2*Math.PI/20;
    for (var i = 0; i <= 20; i+=0.1) {
        point.x = 20*Math.cos (i*dq);
    	point.y = 10*Math.sin (i*dq);
	    geometry.vertices.push (point.clone());
    }
    return new THREE.Line (geometry, new THREE.LineBasicMaterial());
}

function TwoPointLine (q0, q1) {
    lineGroup = new THREE.Object3D();

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

    // add two end points
    var point;
    point = new THREE.Mesh(new THREE.CircleGeometry(1, 12), new THREE.MeshBasicMaterial());
    point.position.copy(q0);
    lineGroup.add(point);
    point = new THREE.Mesh(new THREE.CircleGeometry(1, 12), new THREE.MeshBasicMaterial());
    point.position.copy(q1);
    lineGroup.add(point);

    return lineGroup;
}

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

    camera = new THREE.OrthographicCamera(-50, 50, 50, -50, -10, 10);
    camera.position.z = 10;
    scene.add(camera);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x888888);

    document.body.appendChild(renderer.domElement);
    window.addEventListener('resize', onWindowResize, false);

    //////// in the scene //////////////////////////////////////////

    var geometry = new...