loading...
This commit is contained in:
parent
1a7628bb42
commit
9fca05ae6e
2
app.js
2
app.js
@ -291,7 +291,7 @@ let loadingManager = new THREE.LoadingManager(
|
||||
)
|
||||
loadingManager.onStart = function (url, itemsLoaded, itemsTotal) {
|
||||
loadingPercent.innerText = "0%"
|
||||
loadingDiv.style.display = "inherit"
|
||||
loadingDiv.style.display = "flex"
|
||||
}
|
||||
|
||||
const stats = new Stats()
|
||||
|
||||
@ -1,68 +1,70 @@
|
||||
body { background-color: black; }
|
||||
|
||||
#loadingDiv {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 1.4rem;
|
||||
color: lightsteelblue;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
padding: 30vh;
|
||||
background-color: black;
|
||||
z-index: 1;
|
||||
padding: 30vmin;
|
||||
}
|
||||
|
||||
.scene {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: auto;
|
||||
margin: 0 auto;
|
||||
perspective: 200px;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.cube {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
.tetromino {
|
||||
position: relative;
|
||||
top: 2em;
|
||||
left: 2em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
transform-style: preserve-3d;
|
||||
transform: translateZ(20px);
|
||||
left: 80px;
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
.cube.is-spinning {
|
||||
transform: translateZ(0.5em);
|
||||
animation: spinCube 5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes spinCube {
|
||||
0% { transform: translateZ(20px) rotateX( 0deg) rotateY( 0deg); }
|
||||
100% { transform: translateZ(20px) rotateX(360deg) rotateY(360deg); }
|
||||
0% { transform: translateZ(0.5em) rotateX( 0deg) rotateY( 0deg); }
|
||||
100% { transform: translateZ(0.5em) rotateX(360deg) rotateY(360deg); }
|
||||
}
|
||||
|
||||
.mino {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.first.mino { top: -0.5em; left: -1em; }
|
||||
.second.mino { top: -0.5em; left: 0em; }
|
||||
.third.mino { top: -0.5em; left: 1em; }
|
||||
.fourth.mino { top: 0.5em; left: 0em; }
|
||||
|
||||
.face {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
padding: 0;
|
||||
background: hsla(240, 100%, 0%, 0.4);
|
||||
border: 1px solid hsla(240, 100%, 70%, 0.6);
|
||||
}
|
||||
|
||||
.front { transform: rotateY( 0deg) translateZ(20px); }
|
||||
.right { transform: rotateY( 90deg) translateZ(20px); }
|
||||
.back { transform: rotateY(180deg) translateZ(20px); }
|
||||
.left { transform: rotateY(-90deg) translateZ(20px); }
|
||||
.top { transform: rotateX( 90deg) translateZ(20px); }
|
||||
.bottom { transform: rotateX(-90deg) translateZ(20px); }
|
||||
|
||||
.cube.is-backface-hidden .face {
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.mino0 { left: -40px; top: -20px; }
|
||||
.mino1 { left: 0px; top: -20px; }
|
||||
.mino2 { left: 40px; top: -20px; }
|
||||
.mino3 { left: 0px; top: 20px; }
|
||||
.front.face { transform: rotateY( 0deg) translateZ(0.5em); }
|
||||
.right.face { transform: rotateY( 90deg) translateZ(0.5em); }
|
||||
.back.face { transform: rotateY(180deg) translateZ(0.5em); }
|
||||
.left.face { transform: rotateY(-90deg) translateZ(0.5em); }
|
||||
.top.face { transform: rotateX( 90deg) translateZ(0.5em); }
|
||||
.bottom.face { transform: rotateX(-90deg) translateZ(0.5em); }
|
||||
|
||||
@ -9,6 +9,8 @@ body {
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.lil-menu {
|
||||
@ -171,10 +173,10 @@ h1 {
|
||||
}
|
||||
|
||||
.pause #pauseSpan {
|
||||
display: flex;
|
||||
position:absolute;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
filter: blur(2px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
62
index.html
62
index.html
@ -20,40 +20,48 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="loadingDiv">
|
||||
<span id="loadingDiv">
|
||||
<div class="scene">
|
||||
<div class="cube is-spinning">
|
||||
<div class="mino0 front face"></div>
|
||||
<div class="mino0 back face"></div>
|
||||
<div class="mino0 right face"></div>
|
||||
<div class="mino0 left face"></div>
|
||||
<div class="mino0 top face"></div>
|
||||
<div class="mino0 bottom face"></div>
|
||||
<div class="mino1 front face"></div>
|
||||
<div class="mino1 back face"></div>
|
||||
<div class="mino1 right face"></div>
|
||||
<div class="mino1 left face"></div>
|
||||
<div class="mino1 top face"></div>
|
||||
<div class="mino1 bottom face"></div>
|
||||
<div class="mino2 front face"></div>
|
||||
<div class="mino2 back face"></div>
|
||||
<div class="mino2 right face"></div>
|
||||
<div class="mino2 left face"></div>
|
||||
<div class="mino2 top face"></div>
|
||||
<div class="mino2 bottom face"></div>
|
||||
<div class="mino3 front face"></div>
|
||||
<div class="mino3 back face"></div>
|
||||
<div class="mino3 right face"></div>
|
||||
<div class="mino3 left face"></div>
|
||||
<div class="mino3 top face"></div>
|
||||
<div class="mino3 bottom face"></div>
|
||||
<div class="tetromino">
|
||||
<div class="first mino">
|
||||
<div class="front face"></div>
|
||||
<div class="back face"></div>
|
||||
<div class="left face"></div>
|
||||
<div class="right face"></div>
|
||||
<div class="top face"></div>
|
||||
<div class="bottom face"></div>
|
||||
</div>
|
||||
<div class="second mino">
|
||||
<div class="front face"></div>
|
||||
<div class="back face"></div>
|
||||
<div class="left face"></div>
|
||||
<div class="right face"></div>
|
||||
<div class="top face"></div>
|
||||
<div class="bottom face"></div>
|
||||
</div>
|
||||
<div class="third mino">
|
||||
<div class="front face"></div>
|
||||
<div class="back face"></div>
|
||||
<div class="left face"></div>
|
||||
<div class="right face"></div>
|
||||
<div class="top face"></div>
|
||||
<div class="bottom face"></div>
|
||||
</div>
|
||||
<div class="fourth mino">
|
||||
<div class="front face"></div>
|
||||
<div class="back face"></div>
|
||||
<div class="left face"></div>
|
||||
<div class="right face"></div>
|
||||
<div class="top face"></div>
|
||||
<div class="bottom face"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>Chargement</div>
|
||||
<div id="loadingPercent">0%</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<span id="messagesSpan"></span>
|
||||
<span id="pauseSpan" tabindex="1">II</span>
|
||||
<audio id="music" src="audio/benevolence.m4a" loop></audio>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user