Skip to content
This repository was archived by the owner on Aug 29, 2020. It is now read-only.

Commit 8edfc4b

Browse files
TirondzoTirondzo
committed
Exported to HTML page
1 parent 837dff7 commit 8edfc4b

8 files changed

+122877
-18
lines changed

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
node_modules/*
2-
examples/*
2+
examples/*
3+
dist/*

‎app.js

+3-8
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,7 @@ import * as KeyCode from 'keycode-js';
1414
import * as Stats from 'stats.js';
1515

1616
const INFO_HTML = `
17-
<p>
18-
<a href="http://learningwebgl.com/blog/?p=370" target="_blank">
19-
Some Real 3D Objects
20-
</a>
21-
<p>
22-
The classic WebGL Lessons in luma.gl
17+
Space demo by A.Sobolev
2318
`;
2419

2520
const CONTROLS = {
@@ -274,7 +269,7 @@ export default class AppAnimationLoop extends AnimationLoop {
274269
[this.gl.UNPACK_FLIP_Y_WEBGL]: false
275270
},
276271
// Texture2D accepts a promise that returns an image as data (Async Textures)
277-
data: loadImage('/resources/brdfLUT.png')
272+
data: loadImage('./resources/brdfLUT.png')
278273
});
279274
this.DiffuseEnvSampler = generateSimpleCubemap(gl, 16, [127,127,255]);
280275
this.SpecularEnvSampler = skybox.rttCubemap;
@@ -297,7 +292,7 @@ export default class AppAnimationLoop extends AnimationLoop {
297292
this.pbrShadowProgram = new Program(gl, {vs: PBR_VS_WITH_SHADOWMAP, fs:PBR_FS_WITH_SHADOWMAP});
298293
this.pbrProgram = new Program(gl, {vs: PBR_VS_WITH_SHADOWMAP, fs:PBR_FS});
299294
this.loadOptions.pbrShadowProgram = this.pbrShadowProgram;
300-
loadGLTF("/resources/45-e/scene.gltf", this.gl, this.loadOptions).then(result =>
295+
loadGLTF("./resources/45-e/scene.gltf", this.gl, this.loadOptions).then(result =>
301296
Object.assign(this, result)
302297
);
303298

‎css/index.css

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
html, body{
2+
margin: 0 auto;
3+
padding: 0;
4+
background: #1d1d1d;
5+
6+
font-family: Arial, Helvetica, sans-serif;
7+
color: #eee;
8+
}
9+
10+
header{
11+
text-transform: uppercase;
12+
box-sizing: border-box;
13+
padding: 1vh;
14+
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
15+
font-size: 4vh;
16+
color: #111;
17+
}
18+
19+
.game{
20+
width: 100%;
21+
height: 53vh;
22+
}
23+
24+
.controls{
25+
padding: 3vw 5vw 0vw 5vw;
26+
display: flex;
27+
flex-flow: row wrap;
28+
align-content: space-between;
29+
justify-content: space-between;
30+
}
31+
.key-block{
32+
padding: .5vh;
33+
box-sizing: border-box;
34+
display: inline-block;
35+
width: 40vh;
36+
text-align: left;
37+
}
38+
.key-block>.key{
39+
width: 5vh;
40+
height: 5vh;
41+
font-size: 3vh;
42+
line-height: 5vh;
43+
text-align: center;
44+
font-weight: bold;
45+
border-radius: .3vw;
46+
border: 1px solid #555;
47+
color: #555;
48+
display: inline-block;
49+
}
50+
.key-block>.description{
51+
display: inline-block;
52+
color: #444;
53+
}

‎index.html

+60-1
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,71 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link href="css/index.css" rel="stylesheet">
67
</head>
78
<body>
8-
<div style="width: 800px; height: 600px;">
9+
<header>
10+
<div>Space friction</div>
11+
</header>
12+
<div class="game">
913
<div id="fs-container" style="position: relative; overflow:hidden; width: 100%; height: 100%">
1014
<canvas id="lumagl-canvas" width="800" height="600" style="width: 100%; height: 100%;"></canvas>
1115
</div>
1216
</div>
17+
18+
<div class="controls">
19+
<div class="key-block">
20+
<div class="key">W</div>
21+
<div class="description">Forward</div>
22+
</div>
23+
<div class="key-block">
24+
<div class="key">A</div>
25+
<div class="description">Left | Turn left</div>
26+
</div>
27+
<div class="key-block">
28+
<div class="key">S</div>
29+
<div class="description">Backward</div>
30+
</div>
31+
<div class="key-block">
32+
<div class="key">D</div>
33+
<div class="description">Right | Turn right</div>
34+
</div>
35+
<div class="key-block">
36+
<div class="key">Q</div>
37+
<div class="description">Roll ccw</div>
38+
</div>
39+
<div class="key-block">
40+
<div class="key">E</div>
41+
<div class="description">Roll cw</div>
42+
</div>
43+
<div class="key-block">
44+
<div class="key">C</div>
45+
<div class="description">Down | Picth down</div>
46+
</div>
47+
<div class="key-block">
48+
<div class="key">Z</div>
49+
<div class="description">Up | Pitch up</div>
50+
</div>
51+
<div class="key-block">
52+
<div class="key">X</div>
53+
<div class="description">Norm camera + Stop ship</div>
54+
</div>
55+
<div class="key-block">
56+
<div class="key">V</div>
57+
<div class="description">Ship camera | Free camera</div>
58+
</div>
59+
<div class="key-block">
60+
<div class="key">F</div>
61+
<div class="description">FPS counter</div>
62+
</div>
63+
<div class="key-block">
64+
<div class="key">P</div>
65+
<div class="description">Debug objects</div>
66+
</div>
67+
<div class="key-block">
68+
<div class="key">L</div>
69+
<div class="description">Camera light</div>
70+
</div>
71+
</div>
1372
</body>
1473
</html>

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"@luma.gl/addons": "^7.0.1",
1111
"@luma.gl/constants": "^7.0.1",
1212
"@luma.gl/core": "^7.0.1",
13+
"copy-webpack-plugin": "^5.0.3",
1314
"keycode-js": "^1.0.4",
1415
"math.gl": "^2.3.1",
1516
"stats.js": "^0.17.0"

0 commit comments

Comments
 (0)