-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path404.html
119 lines (109 loc) · 3.42 KB
/
404.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
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<link rel="stylesheet" type="text/css" href="./404/404.css" />
<title>Under Construction</title>
</head>
<body>
<div class="Texts">
<h1>404</h1>
<p>This Page can't be Found</p>
<br>
<p>Maybe it's Under Developement?</p>
</div>
<script src="./404/Lib/three.min.js"></script>
<script>
let scene,camera, renderer, cloudParticles = [], flash, rain, rainGeo, rainCount = 15000;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 1;
camera.rotation.x = 1.16;
camera.rotation.y = -0.12;
camera.rotation.z = 0.27;
ambient = new THREE.AmbientLight(0x555555);
scene.add(ambient);
directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0,0,1);
scene.add(directionalLight);
flash = new THREE.PointLight(0x062d89, 30, 500 ,1.7);
flash.position.set(200,300,100);
scene.add(flash);
renderer = new THREE.WebGLRenderer();
scene.fog = new THREE.FogExp2(0x11111f, 0.002);
renderer.setClearColor(scene.fog.color);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
rainGeo = new THREE.Geometry();
for(let i=0;i<rainCount;i++) {
rainDrop = new THREE.Vector3(
Math.random() * 400 -200,
Math.random() * 500 - 250,
Math.random() * 400 - 200
);
rainDrop.velocity = {};
rainDrop.velocity = 0;
rainGeo.vertices.push(rainDrop);
}
rainMaterial = new THREE.PointsMaterial({
color: 0xaaaaaa,
size: 0.1,
transparent: true
});
rain = new THREE.Points(rainGeo,rainMaterial);
scene.add(rain);
let loader = new THREE.TextureLoader();
loader.load("./404/Lib/smoke-1.png", function(texture){
cloudGeo = new THREE.PlaneBufferGeometry(500,500);
cloudMaterial = new THREE.MeshLambertMaterial({
map: texture,
transparent: true
});
for(let p=0; p<25; p++) {
let cloud = new THREE.Mesh(cloudGeo,cloudMaterial);
cloud.position.set(
Math.random()*800 -400,
500,
Math.random()*500 - 450
);
cloud.rotation.x = 1.16;
cloud.rotation.y = -0.12;
cloud.rotation.z = Math.random()*360;
cloud.material.opacity = 0.6;
cloudParticles.push(cloud);
scene.add(cloud);
}
animate();
});
}
function animate() {
cloudParticles.forEach(p => {
p.rotation.z -=0.002;
});
rainGeo.vertices.forEach(p => {
p.velocity -= 0.1 + Math.random() * 0.1;
p.y += p.velocity;
if (p.y < -200) {
p.y = 200;
p.velocity = 0;
}
});
rainGeo.verticesNeedUpdate = true;
rain.rotation.y +=0.002;
if(Math.random() > 0.93 || flash.power > 100) {
if(flash.power < 100)
flash.position.set(
Math.random()*400,
300 + Math.random() *200,
100
);
flash.power = 50 + Math.random() * 500;
}
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
init();
</script>
</body>
</html>