-
Notifications
You must be signed in to change notification settings - Fork 0
/
lab4.html
112 lines (100 loc) · 3.65 KB
/
lab4.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
<!DOCTYPE HTML>
<meta charset="UTF-8">
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="../RealTimeRenderingLab4/js/webgl-utils.js"></script>
<script src="../RealTimeRenderingLab4/js/planetClass.js"></script>
<script src="../RealTimeRenderingLab4/js/sunClass.js"></script>
<script src="../RealTimeRenderingLab4/js/three.min.js"></script>
<script src="../RealTimeRenderingLab4/js/OrbitControls.js"></script>
<script>
var externalCanvas, renderer, camera, controls, scene, container, light, sun, backgroundScene, backgroundCamera;
init();
animate();
function animate() {
requestAnimationFrame(animate);
render();
update();
controls.update();
}
function init() {
// camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1000, 10000);
camera.position.z = 3500;
// controls
controls = new THREE.OrbitControls(camera);
controls.damping = 0.2;
controls.addEventListener("change", render);
// scene
scene = new THREE.Scene();
THREE.ImageUtils.crossOrigin = '';
// sun light
light = new THREE.PointLight( 0xffffff, 1.0 );
light.position.set( 0,0,0);
scene.add(light);
// environmental lights
var dirLight1 = new THREE.DirectionalLight( 0xffffff, 0.2 );
dirLight1.position.set( 1, 0, 0 );
var dirLight2 = new THREE.DirectionalLight( 0xffffff, 0.2 );
dirLight2.position.set( -1, 0, 0 );
var dirLight3 = new THREE.DirectionalLight( 0xffffff, 0.2 );
dirLight3.position.set( 0, 0, 1 );
var dirLight4 = new THREE.DirectionalLight( 0xffffff, 0.2 );
dirLight4.position.set( 0, 0, -1 );
scene.add( dirLight1 );
scene.add( dirLight2 );
scene.add( dirLight3 );
scene.add( dirLight4 );
// sun
sun = new Sun(100);
// planets
var planetMercury = new Planet("Murcury", 'http://i.imgur.com/1bUmw0U.jpg', 15, 359, 88, 0, sun);
var planetVenus = new Planet("Venus", 'http://i.imgur.com/fYWHB4k.jpg', 38, 672, 225, 0, sun);
var planetEarth = new Planet("Earth", 'http://i.imgur.com/GNAxUAg.jpg', 40, 929, 365, 0, sun);
var moon = new Planet("Moon", 'http://i.imgur.com/1bUmw0U.jpg', 10, 120, 30, 0, planetEarth);
var planetMars = new Planet("Mars", 'http://i.imgur.com/ACGzK6C.jpg', 21, 1416, 687, 0, sun);
// create chil/parent tree
sun.AddChild(planetMercury);
sun.AddChild(planetVenus);
sun.AddChild(planetEarth);
sun.AddChild(planetMars);
planetEarth.AddChild(moon);
// add all bodies to the scene
scene.add(sun.mesh);
scene.add(planetMercury.mesh);
scene.add(planetVenus.mesh);
scene.add(planetEarth.mesh);
scene.add(moon.mesh);
scene.add(planetMars.mesh);
// starfield
var bgGeometry = new THREE.SphereGeometry(3000, 32, 32);
var bgMaterial = new THREE.MeshBasicMaterial();
bgMaterial.map = THREE.ImageUtils.loadTexture('http://i.imgur.com/3NQcM7r.jpg');
bgMaterial.side = THREE.BackSide;
var bgMesh = new THREE.Mesh(bgGeometry, bgMaterial);
scene.add(bgMesh);
// renderer
renderer = new THREE.WebGLRenderer({ antialias: false });
renderer.setSize(window.innerWidth, window.innerHeight);
container = document.getElementById('container');
container.appendChild(renderer.domElement);
animate();
}
function render() {
renderer.render(scene, camera);
}
function update(){
sun.Update();
}
</script>
</body>
</html>