-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
93 lines (82 loc) · 2.68 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
width: 100vw;
height: 100vh
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script>
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 });
var controls = new THREE.OrbitControls(camera);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var globe1Rad = 12;
var globe2Rad = 9;
var globe3Rad = 6;
var angleDegreeStep = 5;
//var geometry = new THREE.BufferGeomtery
var color = new THREE.Color();
function createGlobe(radius) {
var geometry = new THREE.BufferGeometry();
var positions = [];
var colors = [];
for (var i = 1; i < 360; i = i + angleDegreeStep) {
for (var j = 1; j <360; j = j + angleDegreeStep) {
var x = Math.sin(i * Math.PI / 180) * Math.cos(j * Math.PI / 180) * radius;
var y = Math.sin(i * Math.PI / 180) * Math.sin(j * Math.PI / 180) * radius;
var z = Math.cos(i * Math.PI / 180) * radius;
positions.push( x, y, z );
color.setRGB( 66, 244, 182 );
colors.push( color.r, color.g, color.b );
}
}
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
geometry.computeBoundingSphere();
var material = new THREE.PointsMaterial( { size: 0.01, vertexColors: THREE.VertexColors } );
var array = new THREE.Points( geometry, material );
scene.add(array);
return array;
}
var points1 = createGlobe(globe1Rad);
var points2 = createGlobe(globe2Rad);
var points3 = createGlobe(globe3Rad);
//scene.add(points1)
camera.position.z = 5;
var animate = function() {
requestAnimationFrame(animate);
controls.update();
var time = Date.now() * 0.001;
points1.rotation.x = time * 0.25;
points1.rotation.y = time * 0.5;
points2.rotation.x = time * -0.25;
points2.rotation.y = time * -0.5;
points3.rotation.z = time * 0.25;
points3.rotation.y = time * 0.5;
renderer.render(scene, camera);
};
animate();
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
</script>
</body>
</html>