-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (114 loc) · 5.01 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<html>
<head>
<meta charset=utf-8>
<title>Earth Model</title>
<style>
body { margin: 0;
background-image: url("images/galaxy_starfield.png") ;
background: rgb(155,154,195);
background: radial-gradient(circle, rgba(155,154,195,1) 8%, rgba(17,38,106,1) 87%);
}
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-array@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-geo@3"></script>
<script src="/functions.js"></script>
<script>
//Settings
var nStep = 50;
const night = false;
const enableWireframe = true;
const speed = 0.001;
const GLOBE_RADIUS = 1.7;
const CURVE_MIN_ALTITUDE = 0.2;
const CURVE_MAX_ALTITUDE = 0.7;
var newcords = [[32.84933420904412, -117.11577306665959],[39.72936785474714, -75.55077098697406],[32.79577328681345, -96.85859304830119],[25.779620175815072, -80.24902866896761],[40.38979221753041, -80.0759306084545],[36.10492482949355, -115.2347647152365],[36.100871478361356, -115.22378599103946],[33.8835405111569, -117.93040066577963],[43.06691162583355, -89.4366459433431],[33.763976458438925, -84.45081967319514],[37.75551835028943, -122.43828775339452],[38.075071713959886, -122.5635962456642],[48.77578510540918, 9.153178256887925],[-33.95493009464746, 18.587481669495357],[34.85608049747699, 136.7582077042448],[30.379978809139967, 531.711540043]];
//Variables
var nEnd = 0,nMax, currentmesh,cordID = 0;
var lastCords = [0,0];
const DEGREE_TO_RADIAN = Math.PI / 180;
var geoInterpolate = d3.geoInterpolate;
var group = new THREE.Group();
//Setup the Scene
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer({ antialias: true,alpha:true });
//Setup the Renderer
renderer.setSize( 1920 , 1080 );
renderer.setClearColor(0x000000, 0);
document.body.appendChild( renderer.domElement );
//Create the Globe
var globe = new THREE.SphereGeometry(1.7, 32, 32);
var globeMaterial = new THREE.MeshPhongMaterial();
var globeTexture = night ? 'images/earthlights10k.jpg' : 'images/earthmap10k.jpg';
globeMaterial.map = new THREE.TextureLoader().load(globeTexture);
globeMaterial.bumpMap = new THREE.TextureLoader().load('images/earthbump10k.jpg');
globeMaterial.bumpScale = 0.00;
globeMaterial.specularMap = new THREE.TextureLoader().load('images/earthspec1k.jpg')
globeMaterial.specular = new THREE.Color('white')
globeMaterial.shininess = 0.1;
var globeMesh = new THREE.Mesh( globe, globeMaterial );
//Create The Lights
var directLight = new THREE.DirectionalLight(0xffffff, 1);
directLight.position.set(0,3,5);
//Add all the objects to the scene
scene.add( globeMesh );
scene.add(directLight);
scene.add(group);
//Createing the Wireframe
var wireframeSphere = new THREE.SphereGeometry( 2, 20,20 );
var wireframeGeometry = new THREE.WireframeGeometry( wireframeSphere );
let wireframeLines = new THREE.LineSegments( wireframeGeometry );
wireframeLines.material.opacity = 1;
wireframeLines.material.transparent = true;
wireframeLines.material.color = new THREE.Color(0xffffff);
if(enableWireframe){
scene.add( wireframeLines );
}
//Setup Camera
camera.position.z = 3;
camera.position.y = 1.5;
camera.rotation.x = -0.45;
//create point to point curve
function drawCords(newCords){
let cords = [lastCords[0],lastCords[1],newCords[0],newCords[1]];
let spline = getSplineFromCoords(cords);
let tube = new THREE.TubeGeometry(spline, 50, 0.006, 8, false);
let buffer = new THREE.BufferGeometry().fromGeometry( tube );
let tubematerial = new THREE.MeshBasicMaterial({color: getRandomColor()});
currentmesh = new THREE.Mesh(buffer, tubematerial);
nMax = buffer.attributes.position.count;
currentmesh.geometry.setDrawRange( 0, 0 );
group.add(currentmesh);
lastCords = newCords;
}
//Function to Animate the Scene
function animate() {
requestAnimationFrame( animate );
//rotation of the Globe, Wireframe, and the LineGroup
globeMesh.rotation.y += speed;
wireframeLines.rotation.y += speed;
group.rotation.y += speed;
//Animation of Line Building itself
if( nEnd < nMax){
console.log("Drawing next Step")
nEnd = ( nEnd + nStep ) ;
currentmesh.geometry.setDrawRange( 0, nEnd );
}else{
if(cordID+1 != newcords.length-1){
console.log("There is aqnother one")
cordID++;
nEnd = 0;
drawCords(newcords[cordID]);
}
}
renderer.render( scene, camera );
};
//Start the Animation
animate();
</script>
</body>
</html>