tovi
/
traceroute-globe
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

Finished

master
Tovi Jaeschke 5 years ago
parent
43d6e672a3
commit
44b04c1933
3 changed files with 14 additions and 65 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -49
      demo.html
  2. +8
    -1
      index.html
  3. +6
    -15
      js/animations.js

+ 0
- 49
demo.html View File

@ -1,49 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
}
#globe, #traceout {
display: inline-block;
vertical-align: top;
}
#cmdout {
color: white;
}
</style>
</head>
<body>
<?php include "php/traceroute.php" ?>
<div id="globe">
<!-- This is where our renderer will attach the scene -->
<canvas></canvas>
</div>
<script src="js/points.js"></script>
<script src="js/external/three.js"></script>
<script src="js/external/orbital-controls.js"></script>
<script src="js/animations.js"></script>
<div id="traceout">
<button id="btnrun">Run Traceroute to google.com</button>
<p id="cmdout"></p>
</div>
<script>
init();
var runTraceroute = function() {
var rawout = '<?php traceroute(); raw_output() ?>';
var tracepoints = '<?php json_output(); ?>';
document.getElementById('cmdout').innerHTML += rawout;
init.addTracePoints(JSON.parse(tracepoints));
document.getElementById("btnrun").style.display = "none";
};
document.getElementById ("btnrun").addEventListener ("click", runTraceroute, false);
</script>
</body>
</html>

+ 8
- 1
index.html View File

@ -15,7 +15,7 @@
</style> </style>
</head> </head>
<body> <body>
<?php include "php/traceroute.php" ?>
<!--<?php include "php/traceroute.php" ?>-->
<div id="globe"> <div id="globe">
<!-- This is where our renderer will attach the scene --> <!-- This is where our renderer will attach the scene -->
@ -23,17 +23,23 @@
</div> </div>
<script src="js/points.js"></script> <script src="js/points.js"></script>
<script src="js/tracepoints.js"></script>
<script src="js/external/three.js"></script> <script src="js/external/three.js"></script>
<script src="js/external/orbital-controls.js"></script> <script src="js/external/orbital-controls.js"></script>
<script src="js/animations.js"></script> <script src="js/animations.js"></script>
<div id="traceout"> <div id="traceout">
<h2>Traceroute from Adelaide, SA to google.com</h2>
<!--
<button id="btnrun">Run Traceroute to google.com</button> <button id="btnrun">Run Traceroute to google.com</button>
<p id="cmdout"></p> <p id="cmdout"></p>
-->
</div> </div>
<!--
<script> <script>
init(); init();
var runTraceroute = function() { var runTraceroute = function() {
var rawout = '<?php traceroute(); raw_output() ?>'; var rawout = '<?php traceroute(); raw_output() ?>';
var tracepoints = '<?php json_output(); ?>'; var tracepoints = '<?php json_output(); ?>';
@ -44,6 +50,7 @@
document.getElementById ("btnrun").addEventListener ("click", runTraceroute, false); document.getElementById ("btnrun").addEventListener ("click", runTraceroute, false);
</script> </script>
-->
</body> </body>
</html> </html>

+ 6
- 15
js/animations.js View File

@ -7,7 +7,7 @@ function init() {
const globeSegments = 64 const globeSegments = 64
const globeWidth = 4098 / 2 const globeWidth = 4098 / 2
const globeHeight = 1968 / 2 const globeHeight = 1968 / 2
const traceSteps = 10;
const traceSteps = 100;
const groups = { const groups = {
globe: null, globe: null,
@ -84,6 +84,7 @@ function init() {
scene.add(groups.globe) scene.add(groups.globe)
addPoints() addPoints()
addTracePoints()
} }
function addPoints() { function addPoints() {
@ -110,8 +111,7 @@ function init() {
} }
function addTracePoints(tracepoints) {
console.log(tracepoints);
function addTracePoints() {
const mergedGeometry = new THREE.Geometry() const mergedGeometry = new THREE.Geometry()
const pingGeometry = new THREE.SphereGeometry(1.9, 5, 5) const pingGeometry = new THREE.SphereGeometry(1.9, 5, 5)
const material = new THREE.MeshBasicMaterial({ const material = new THREE.MeshBasicMaterial({
@ -133,17 +133,12 @@ function init() {
groups.tracePoints.name = 'Trace Points' groups.tracePoints.name = 'Trace Points'
scene.add(groups.tracePoints) scene.add(groups.tracePoints)
groups.tracePoints.rotation.y = groups.globePoints.rotation.y - 0.05 groups.tracePoints.rotation.y = groups.globePoints.rotation.y - 0.05
//drawTraceLines(tracepoints);
drawTraceLines(tracepoints);
} }
/*
function calculateLine(a, b) { function calculateLine(a, b) {
var line = []; var line = [];
if (a < b) {
var step = (a - b) / (traceSteps - 1);
} else {
var step = (b - a) / (traceSteps - 1);
}
var step = (b - a) / (traceSteps - 1);
var k; var k;
for (k = 0; k < traceSteps ; k++) { for (k = 0; k < traceSteps ; k++) {
line.push(a + (step * k)); line.push(a + (step * k));
@ -153,7 +148,7 @@ function init() {
function drawTraceLines(tracepoints) { function drawTraceLines(tracepoints) {
const mergedGeometry = new THREE.Geometry() const mergedGeometry = new THREE.Geometry()
const pingGeometry = new THREE.SphereGeometry(1.9, 5, 5)
const pingGeometry = new THREE.SphereGeometry(0.9, 5, 5)
const material = new THREE.MeshBasicMaterial({ const material = new THREE.MeshBasicMaterial({
color: '#FF4c4c', color: '#FF4c4c',
}) })
@ -191,8 +186,6 @@ function init() {
groups.traceLines.rotation.y = groups.globePoints.rotation.y - 0.05 groups.traceLines.rotation.y = groups.globePoints.rotation.y - 0.05
} }
*/
init.addTracePoints = addTracePoints; init.addTracePoints = addTracePoints;
@ -290,11 +283,9 @@ function init() {
if (groups.tracePoints !== null) { if (groups.tracePoints !== null) {
groups.tracePoints.rotation.y += 0.01 groups.tracePoints.rotation.y += 0.01
} }
/*
if (groups.traceLines !== null) { if (groups.traceLines !== null) {
groups.traceLines.rotation.y += 0.01 groups.traceLines.rotation.y += 0.01
} }
*/
} }
} }

Write Preview
Loading…
Cancel
Save