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