adrien/daedalus
adrien/daedalus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rotating loading maze

Browse Source
This commit is contained in:
Adrien MALINGREY 2024-03-14 21:37:05 +01:00
parent 1fb8296bcd
commit 9ac5c35c90
3 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -144,7 +144,9 @@
</head>
<body>
<div id="loading">
<div id="labyShadow">
<table id="labyTable"></table>
</div>
<div id="loadingMessage">Construction du labyrinthe : <span id="progress">0</span>%</div>
<div>
Se déplacer : ↑←↓→, ZQSD ou clic<br/>

17
main.js
View File

@ -69,18 +69,17 @@ function* endlessLaby() {
}
}
let labyIterator = endlessLaby()
let interval = window.setInterval(() => labyIterator.next(), 200)
let interval
const loadMngr = new THREE.LoadingManager()
const loader = new THREE.TextureLoader(loadMngr)
loader.setPath("textures/")
let t0
loadMngr.onStart = function (url, itemsLoaded, itemsTotal) {
progress.innerText = "0"
t0 = Date.now()
let labyIterator = endlessLaby()
interval = window.setInterval(() => labyIterator.next(), 200)
}
loadMngr.onProgress = function (url, itemsLoaded, itemsTotal) {
progress.innerText = Math.floor(100 * itemsLoaded / itemsTotal)
@ -203,10 +202,10 @@ function repeatGroundMaterial (texture) {
}
const groundMaterial = new THREE.MeshStandardMaterial({
map : loader.load('angled-blocks-vegetation/albedo.webp', repeatGroundMaterial),
aoMap : loader.load('angled-blocks-vegetation/ao.webp', repeatGroundMaterial),
metalnessMap: loader.load('angled-blocks-vegetation/metallic.webp', repeatGroundMaterial),
aoMap : loader.load('angled-blocks-vegetation/ao-roughness-metalness.webp', repeatGroundMaterial),
metalnessMap: loader.load('angled-blocks-vegetation/ao-roughness-metalness.webp', repeatGroundMaterial),
normalMap : loader.load('angled-blocks-vegetation/normal-dx.webp', repeatGroundMaterial),
roughnessMap: loader.load('angled-blocks-vegetation/roughness.webp', repeatGroundMaterial),
roughnessMap: loader.load('angled-blocks-vegetation/ao-roughness-metalness.webp', repeatGroundMaterial),
/*hexTiling : {
patchScale: 1,
useContrastCorrectedBlending: true,

20
style.css
View File

@ -12,20 +12,36 @@ body {
font-size: 1.3em;
top: 20vh;
margin: auto;
font-family: sans-serif;
}
#loadingMessage {
margin-bottom: 0.5em;
}
#labyTable {
#labyShadow {
width: 230px;
height: 230px;
margin-left: auto;
margin-right: auto;
margin-top: 20vh;
margin-bottom: 5vh;
filter: drop-shadow(0px 10px 0px #0c1c2b);
}
@keyframes rotation {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
#labyTable {
border-collapse: collapse;
animation: rotation 60s infinite;
}
#labyTable td {
@ -70,7 +86,7 @@ body {
justify-content: center;
z-index: 1;
color: gray;
font-family: Times, "Times New Roman", Georgia, serif;
font-family: serif;
}
#message a {