/
aurora.html
93 lines (78 loc) · 2.37 KB
/
aurora.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>
<title>Aurora</title>
</head>
<style>
body{
margin: 0;
overflow: hidden;
}
</style>
<body>
<div id="container"></div>
</body>
<script src="bower_components/three.js/build/three.js"></script>
<script src="bower_components/three.js/examples/js/controls/TrackballControls.js"></script>
<script src="bower_components/dat.gui/dat.gui.min.js"></script>
<script src="js/classes.js"></script>
<script>
var camera, scene, renderer, controls, gui;
var angle = 0;
var clock = new THREE.Clock();
var time;
var auroraMat;
var aurora = new Aurora();
var box, occlusionBox;
var occlusionRenderTarget, occlusionComposer, composer, volumetericLightShaderUniforms;
const DEFAULT_LAYER = 0,
OCCLUSION_LAYER = 1,
OTHER = 2;
function resize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function init() {
var container = document.getElementById( 'container' );
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCSoftShadowMap;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight);
renderer.setClearColor(0xededed);
container.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set(0, 0, 10);
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 2.0;
controls.panSpeed = 0.8;
controls.zoomSpeed = 1.5;
scene = new THREE.Scene();
var directionalLight = new THREE.DirectionalLight(0xffffff, .7);
directionalLight.position.set(1, -1, 0).normalize();
directionalLight.castShadow = true;
var ambientLight = new THREE.AmbientLight(0xffffff);
var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 0, 0);
scene.add(ambientLight);
scene.add(directionalLight);
scene.add(pointLight);
scene.add(aurora.mesh);
window.addEventListener('resize', resize);
}
function update(){
time = clock.getDelta() * .0005;
auroraMat.uniforms["uTime"].value += time;
camera.lookAt(scene.position);
controls.update();
}
function animate(){
update();
renderer.render(scene, camera);
window.requestAnimationFrame(animate);
}
init();
animate();
</script>
</html>