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

loading progress circle

Browse Source
This commit is contained in:
Adrien MALINGREY 2023-06-28 17:37:52 +02:00
parent bff47a6bbe
commit 6079d802f2
3 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -143,7 +143,7 @@
</head> </head>
<body> <body>
<div id="container"></div> <div id="container"></div>
<span id="message" class="loading"></span> <span id="message" class="loading"><div id="progressCircle" data-progress="0" style="--progress: 0deg;"></div></span>
<script type="module" src="main.js"></script> <script type="module" src="main.js"></script>

9
main.js
View File

@ -35,10 +35,13 @@ piano.loop = false
const loadMngr = new THREE.LoadingManager(); const loadMngr = new THREE.LoadingManager();
const loader = new THREE.TextureLoader(loadMngr); const loader = new THREE.TextureLoader(loadMngr);
loadMngr.onStart = function (url, itemsLoaded, itemsTotal) { loadMngr.onStart = function (url, itemsLoaded, itemsTotal) {
message.innerHTML = 'Chargement : 0%...' progressCircle.setAttribute("data-progress", 0)
progressCircle.style.setProperty("--progress", "0deg")
} }
loadMngr.onProgress = function (url, itemsLoaded, itemsTotal) { loadMngr.onProgress = function (url, itemsLoaded, itemsTotal) {
message.innerHTML = 'Chargement : ' + Math.floor(100 * itemsLoaded / itemsTotal) + '%...' progressCircle.setAttribute("data-progress", Math.floor(100 * itemsLoaded / itemsTotal))
progressCircle.style.setProperty("--progress", Math.floor(360 * itemsLoaded / itemsTotal)+"deg")
} }
loadMngr.onError = function (url) { loadMngr.onError = function (url) {
message.innerHTML = 'Erreur de chargement' message.innerHTML = 'Erreur de chargement'
@ -101,7 +104,7 @@ const wallMaterial = new THREE.MeshStandardMaterial({
aoMap : loader.load('textures/stonewall/ao.png'), aoMap : loader.load('textures/stonewall/ao.png'),
roughnessMap: loader.load('textures/stonewall/roughness.png'), roughnessMap: loader.load('textures/stonewall/roughness.png'),
roughness : 1, roughness : 1,
envMapIntensity: 0.2 envMapIntensity: 0.1
}) })
const maze = new MazeMesh(mazeWidth, mazeWidth, 1, wallMaterial); const maze = new MazeMesh(mazeWidth, mazeWidth, 1, wallMaterial);

26
style.css
View File

@ -40,7 +40,31 @@ body {
#message.loading { #message.loading {
display: flex; display: flex;
top: 30vh; top: 30vh;
font-size: 4vh; }
#message.loading div {
display: flex;
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(#1da8b7 var(--progress), dimgray 0deg);
font-size: 0;
}
#message.loading div::after {
content: attr(data-progress) '%';
display: flex;
justify-content: center;
flex-direction: column;
width: 100%;
margin: 4px;
border-radius: 50%;
color: white;
background: black;
font-size: 3vh;
font-weight: 400;
font-family: system-ui;
text-align: center;
} }
#message a { #message a {