Parallel Lines

Three.JS Test of Lines and their properties.

by black strings

HTML

<!-- <script type="text/javascript" src="http://mrdoob.github.com/three.js/build/Three.js"></script> -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

<div id='container'/>
<div id="info" style="visibility:visible;">
        <div class="top-left">
            Cory's Three.JS Testing Sandbox
        </div>
        <div class="top-right">
            <ul style="list-style-type: none" id="onscreenStats">
                <li id="DiffStatA"><!--Stats inserted here with jquery --></li>
                <li id="SlopeAStat"><!--Stats inserted here with jquery --></li>
                <li id="ABSeperator"></li>
                <li id="DiffStatB"><!--Stats inserted here with jquery --></li>
                <li id="SlopeBStat"><!--Stats inserted here with jquery --></li>
            </ul>
        </div>
        <br />
        <!-- Display keyboard shortcuts and toggles -->
        <div class="bottom" id="inlineDoc" >
            <i>h</i> to toggle HUD - <i>p</i> for screenshot - <i>f</i> for fullscreen -
        </div>
    </div>

CSS

body {
    overflow    : hidden;
    padding        : 0;
    margin        : 0;

    color        : #000000;
    background-color: #ffffff;
    font-family    : arial;
    font-size    : 100%;
}

#info {
    color: #000000;
}

#info .top-left {
    position    : absolute;
    top            : 0px;
    width        : auto;
    padding        : 5px;
}

#info a {
    color        : #66F;
    text-decoration    : none;
}
#info a:hover {
    text-decoration    : underline;
}
#info .bottom {
    position    : absolute;
    bottom        : 0px;
    right        : 5px;
    padding        : 5px;
}
#info .top-right 
{
    color: #000000;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 5px;
    text-align: right;
}

JavaScript

var camera, scene, renderer;

init();
animate();

var lineGeoA, lineGeoB;
var lineA, lineB;


function init() {

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

    // Add 3D objects to scene, initialize other objects here
    var lineMat = new THREE.LineBasicMaterial({
        color: 0xff0000
    });

    lineGeoA = new THREE.Geometry();
    lineGeoA.vertices.push(new THREE.Vector3(-100, 0, 0));
    lineGeoA.vertices.push(new THREE.Vector3(0, 100, 0));

    lineGeoB = new THREE.Geometry();
    lineGeoB.vertices.push(new THREE.Vector3(0, 0, 0));
    lineGeoB.vertices.push(new THREE.Vector3(100, 100, 0));

    lineA = new THREE.Line(lineGeoA, lineMat);
    lineB = new THREE.Line(lineGeoB, lineMat);
    
    //translate(lineB, 100, new THREE.Vector3(-1,0,0));
    
    scene.add(lineA);
    scene.add(lineB);

    
    var lineA_xDiff = lineGeoA.vertices[0].x - lineGeoA.vertices[1].x;
    var lineA_yDiff = lineGeoA.vertices[0].y - lineGeoA.vertices[1].y;
    var lineB_xDiff = lineGeoB.vertices[0].x - lineGeoB.vertices[1].x;
    var lineB_yDiff = lineGeoB.vertices[0].y - lineGeoB.vertices[1].y;

    var lineA_Slope = lineA_xDiff / lineA_yDiff;

    $('#DiffStatA').html("LineA_xDiff = " + lineA_xDiff + " & LineA_yDiff = " + lineA_yDiff);
    $('#SlopeAStat').html("Slope of LineA: " + lineA_xDiff / lineA_yDiff);
    $('#ABSeperator').html('------------------------------------------------------');
    $('#DiffStatB').html("LineB_xDiff = " + lineB_xDiff + " & LineB_yDiff = " + lineB_yDiff);
    $('#SlopeBStat').html("Slope of LineB: " + lineB_xDiff / lineB_yDiff);
    
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    $('#container').append(renderer.domElement);

}

function animate() {

    requestAnimationFrame(animate);

    // Add animation logic and updates here
   ...