-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
91 lines (79 loc) · 3.74 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
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="node_modules/three/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 10, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var sun = new THREE.Mesh( new THREE.SphereGeometry( 4, 100, 100 ), new THREE.MeshBasicMaterial( { color: 0xd96d1a} ) );
var mercury = new THREE.Mesh( new THREE.SphereGeometry( 0.02, 100, 100 ), new THREE.MeshBasicMaterial( { color: 0xcf864e } ) );
var venus = new THREE.Mesh( new THREE.SphereGeometry( 0.06, 100, 100 ), new THREE.MeshBasicMaterial( { color: 0xde9c33 } ) );
var earth = new THREE.Mesh( new THREE.SphereGeometry( 0.062, 100, 100 ), new THREE.MeshBasicMaterial( { color: 0x337ade } ) );
var moon = new THREE.Mesh( new THREE.SphereGeometry( 0.02, 100, 100 ), new THREE.MeshBasicMaterial( { color: 0xdddddd } ) );
var mars = new THREE.Mesh( new THREE.SphereGeometry( 0.02, 100, 100 ), new THREE.MeshBasicMaterial( { color: 0xd98627 } ) );
var jupiter = new THREE.Mesh( new THREE.SphereGeometry( 0.8, 100, 100 ), new THREE.MeshBasicMaterial( { color: 0xf5ead3 } ) );
var saturn = new THREE.Mesh( new THREE.SphereGeometry( 0.6, 100, 100 ), new THREE.MeshBasicMaterial( { color: 0xf5d864 } ) );
var saturnBelt = new THREE.Mesh( new THREE.RingGeometry( 1, 1.2, 100 ), new THREE.MeshBasicMaterial( { color: 0x94671b, side: THREE.DoubleSide } ));
var saturnBelt2 = new THREE.Mesh( new THREE.RingGeometry( 0.9, 0.8, 100 ), new THREE.MeshBasicMaterial( { color: 0x94671b, side: THREE.DoubleSide } ));
var saturnBelt3 = new THREE.Mesh( new THREE.RingGeometry( 1.4, 1.25, 100 ), new THREE.MeshBasicMaterial( { color: 0x94671b, side: THREE.DoubleSide } ));
var uranus = new THREE.Mesh( new THREE.SphereGeometry( 0.25, 100, 100 ), new THREE.MeshBasicMaterial( { color: 0x1ddef0 } ) );
var neptune = new THREE.Mesh( new THREE.SphereGeometry( 0.25, 100, 100 ), new THREE.MeshBasicMaterial( { color: 0x22a7d4 } ) );
sun.position.set(-7, 0, 0);
mercury.position.set(-1.9, 0, 0);
venus.position.set(-1.5, 0, 0);
earth.position.set(-1, 0, 0);
moon.position.set(-0.85, 0, 0);
mars.position.set(-0.4, 0, 0);
jupiter.position.set(0.7, 0, 0);
saturn.position.set(3, 0, 0);
saturnBelt.position.set(3, 0, 0);
saturnBelt2.position.set(3, 0, 0);
saturnBelt3.position.set(3, 0, 0);
uranus.position.set(4.6, 0, 0);
neptune.position.set(5.8, 0, 0);
saturnBelt.rotation.set(1.2, 0.5, 0);
saturnBelt2.rotation.set(1.2, 0.5, 0);
saturnBelt3.rotation.set(1.2, 0.5, 0);
scene.add( sun );
scene.add( mercury );
scene.add( venus );
scene.add( earth );
scene.add( moon );
scene.add( mars );
scene.add( jupiter );
scene.add( saturn );
scene.add( saturnBelt );
scene.add( saturnBelt2 );
scene.add( saturnBelt3 );
scene.add( uranus );
scene.add( neptune );
var scale = 1;
var cameraZ = 40;
var cameraX = 0;
var cameraY = 0;
camera.position.z = cameraZ;
var animate = function () {
requestAnimationFrame( animate );
scale += 0.0005;
cameraX += 0.001;
cameraZ += 0.02;
sun.scale.x = scale;
sun.scale.y = scale;
sun.scale.z = scale;
camera.position.x = cameraX + 0.001;
camera.position.z = cameraZ + 0.001;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>