JSFiddle - React, Tailwind, and code Playground

by sagh0900

HTML

<script src="https://www.dropbox.com/s/a3qybt6dfxab7xh/CombinedCamera.js"></script>
<center> <h1> Displaying Cones with relationship</h1> </center>
<br />
<div>
    Combo Camera <br />
    View: <a href="#" onclick="setOrthographic();return false;"> Orthographic</a> |
          <a href="#" onclick="setPerspective();return false;">Perspective</a> <br />
</div>
<div id= "fov"> </div>
<br />
Select The Layer: <select id="cameras">
<option></option>
<option>Mesh1</option>
<option>Mesh2</option>
<option>Mesh3</option>
</select>

<br />
<div id="output"></div>

CSS

body {
    font-family: Helvetica, FreeSans, Arial, sans-serif;
    font-size: 10px;
}

#output {
    margin: auto auto;
    width:  720px;
    height: 405px;
    border: 1px solid #CCC;
}

JavaScript

var lc_relationship= null;
var container, nSize = 100;
var camera, scene, renderer, mesh;
container = document.getElementById('output');
var width = container.offsetWidth, height = container.offsetHeight;

function setOrthographic() 
  {
    camera.toOrthographic();
    camera.updateProjectionMatrix();
    document.getElementById('fov').innerHTML = "Orthographic mode" ;
  }

function setPerspective() 
{
    camera.toPerspective();
    camera.updateProjectionMatrix();
    document.getElementById('fov').innerHTML = "Perspective mode" ;
}



function generateData()
{

    var aSensor1 = [],
        aSensor2 = [],
        aSensor3 = [];

    lc_relationship = {
            "sensor1":[],
            "sensor2":[],
            "sensor3":[]
                      }

    for(i=1; i<=nSize; i++)
    {
        aSensor1.push(i);
        aSensor2.push(i);
        aSensor3.push(i);
    }

    var meshMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: 0.6, depthWrite: false, depthTest: false, vertexColors: THREE.VertexColors } ); 

    for(n=0; n<nSize; n++)
    {
        var pos1 = Math.floor(Math.random() * (nSize-n));
        var pos2 = Math.floor(Math.random() * (nSize-n));
        var pos3 = Math.floor(Math.random() * (nSize-n));

        var int1 = aSensor1[pos1]; aSensor1.splice(pos1,1);
        var int2 = aSensor2[pos2]; aSensor2.splice(pos2,1);
        var int3 = aSensor3[pos3]; aSensor3.splice(pos3,1);

        lc_relationship.sensor1[int1-1]  = 
        {
            "ObjectID" : "sens1_" + rightPad(int1),
            "Geometry" : getGeometry(meshMaterial),
            "Parent":null,
            "child": "sens2_" + rightPad(int2),
            "z_cordinate": -5
        } 

        lc_relationship.sensor2[int2-1]  = 
        {
            "ObjectID" : "sens2_" + rightPad(int2),
            "Geometry" : getGeometry(meshMaterial),
            "Parent":"sens1_" + rightPad(int1),
            "child": "sens3_" + rightPad(int3),
            "z_cordinate":...