forked from Anemolo/Infinite-Lights
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex4.html
125 lines (113 loc) · 4.48 KB
/
index4.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
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Infinite Lights | Demo 1 | Codrops</title>
<meta name="description" content="A Three.js powered animation that resembles the nightly view of fast cars on a road." />
<meta name="keywords" content="webgl, three.js, cars, road, highway, lights, speed, web development, demo, javascript" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/uok8swb.css">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>
document.documentElement.className = "js";
var supportsCssVars = function() { var e, t = document.createElement("style"); return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e };
supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");
</script>
</head>
<body class="demo-4">
<main>
<div class="frame">
<div class="frame__title-wrap">
<h1 class="frame__title">Infinite Lights</h1>
<div class="frame__links">
<a href="https://tympanus.net/Development/webGLImageTransitions/">Previous demo</a>
<a href="https://tympanus.net/codrops/?p=44516">Article</a>
<a href="https://github.com/Anemolo/InfiniteLights">GitHub</a>
</div>
</div>
<div class="frame__info">Hint: Press to speed up</div>
<div class="frame__demos">
<a href="index.html" class="frame__demo">interstate 1</a>
<a href="index2.html" class="frame__demo">interstate 2</a>
<a href="index3.html" class="frame__demo">interstate 3</a>
<a href="index4.html" class="frame__demo frame__demo--current">interstate 4</a>
<a href="index5.html" class="frame__demo">interstate 5</a>
<a href="index6.html" class="frame__demo">interstate 6</a>
<a href="index7.html" class="frame__demo">interstate 7</a>
</div>
</div>
<div class="content">
<div id="app"></div>
<div class="content__title-wrap">
<span class="content__pretitle">Cyber Mountain</span>
<h2 class="content__title">Aerobase</h2>
<a class="content__link" href="#">Play it</a>
</div>
</div>
</main>
<script src="js/three.min.js"></script>
<script src="js/postprocessing.min.js"></script>
<script src="js/InfiniteLights.js"></script>
<script src="js/Distortions.js"></script>
<script>
(function() {
const container = document.getElementById('app');
const options = {
onSpeedUp: (ev) => {
},
onSlowDown: (ev) => {
},
// mountainDistortion || LongRaceDistortion || xyDistortion || turbulentDistortion || turbulentDistortionStill || deepDistortionStill || deepDistortion
distortion: turbulentDistortion,
length: 400,
roadWidth: 10,
islandWidth: 2,
lanesPerRoad: 3,
fov: 90,
fovSpeedUp: 150,
speedUp: 2,
carLightsFade: 0.4,
totalSideLightSticks: 20,
lightPairsPerRoadWay: 40,
// Percentage of the lane's width
shoulderLinesWidthPercentage: 0.05,
brokenLinesWidthPercentage: 0.1,
brokenLinesLengthPercentage: 0.5,
/*** These ones have to be arrays of [min,max]. ***/
lightStickWidth: [0.12, 0.5],
lightStickHeight: [1.3, 1.7],
movingAwaySpeed: [60, 80],
movingCloserSpeed: [-120, -160],
/**** Anything below can be either a number or an array of [min,max] ****/
// Length of the lights. Best to be less than total length
carLightsLength: [400 * 0.03, 400 * 0.2],
// Radius of the tubes
carLightsRadius: [0.05, 0.14],
// Width is percentage of a lane. Numbers from 0 to 1
carWidthPercentage: [0.3, 0.5],
// How drunk the driver is.
// carWidthPercentage's max + carShiftX's max -> Cannot go over 1.
// Or cars start going into other lanes
carShiftX: [-0.8, 0.8],
// Self Explanatory
carFloorSeparation: [0, 5],
colors: {
roadColor: 0x080808,
islandColor: 0x0a0a0a,
background: 0x000000,
shoulderLines: 0x131318,
brokenLines: 0x131318,
/*** Only these colors can be an array ***/
leftCars: [0xD856BF, 0x6750A2, 0xC247AC],
rightCars: [0x03B3C3, 0x0E5EA5, 0x324555],
sticks: 0x03B3C3,
}
};
const myApp = new App(container, options);
myApp.loadAssets().then(myApp.init)
})()
</script>
</body>
</html>