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

17
main.js
View File

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

20
style.css
View File

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