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

Compare commits

base: adrien:6079d802f23cb1ed3ff702a9c7b503797ff3b889
Branches Tags
adrien:master
adrien:hexTiling
..
compare: adrien:7bc2344d32a8ca8b846cd744613fb8b4b833c566
Branches Tags
adrien:master
adrien:hexTiling

No commits in common. "6079d802f23cb1ed3ff702a9c7b503797ff3b889" and "7bc2344d32a8ca8b846cd744613fb8b4b833c566" have entirely different histories.
6079d802f2 ... 7bc2344d32

3 changed files with 13 additions and 43 deletions
Show Stats 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"><div id="progressCircle" data-progress="0" style="--progress: 0deg;"></div></span> <span id="message" class="loading"></span>
<script type="module" src="main.js"></script> <script type="module" src="main.js"></script>

28
main.js
View File

@ -1,3 +1,4 @@
import * as THREE from 'three'; import * as THREE from 'three';
import { Octree } from 'three/addons/math/Octree.js'; import { Octree } from 'three/addons/math/Octree.js';
@ -35,13 +36,10 @@ 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) {
progressCircle.setAttribute("data-progress", 0) message.innerHTML = 'Chargement : 0%...'
progressCircle.style.setProperty("--progress", "0deg")
} }
loadMngr.onProgress = function (url, itemsLoaded, itemsTotal) { loadMngr.onProgress = function (url, itemsLoaded, itemsTotal) {
progressCircle.setAttribute("data-progress", Math.floor(100 * itemsLoaded / itemsTotal)) message.innerHTML = 'Chargement : ' + 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'
@ -68,7 +66,6 @@ renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.shadowMap.enabled = true; renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.physicallyCorrectLights = true; renderer.physicallyCorrectLights = true;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild(renderer.domElement); container.appendChild(renderer.domElement);
@ -84,10 +81,8 @@ scene.background = new THREE.CubeTextureLoader()
'rt.jpg', 'rt.jpg',
'lf.jpg', 'lf.jpg',
] ); ] );
scene.backgroundBlurriness = 0.03;
scene.environment = scene.background;
window.scene = scene; window.scene = scene
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000); const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.rotation.order = 'YXZ'; camera.rotation.order = 'YXZ';
@ -99,12 +94,10 @@ const collisionner = new THREE.Group();
const wallMaterial = new THREE.MeshStandardMaterial({ const wallMaterial = new THREE.MeshStandardMaterial({
map : loader.load('textures/stonewall/albedo.png'), map : loader.load('textures/stonewall/albedo.png'),
normalMap : loader.load('textures/stonewall/normal.png'), normalMap : loader.load('textures/stonewall/normal.png'),
normalScale : new THREE.Vector2(0.6, 0.6),
metalnessMap: loader.load('textures/stonewall/metalness.png'), metalnessMap: loader.load('textures/stonewall/metalness.png'),
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, envMap : scene.background
envMapIntensity: 0.1
}) })
const maze = new MazeMesh(mazeWidth, mazeWidth, 1, wallMaterial); const maze = new MazeMesh(mazeWidth, mazeWidth, 1, wallMaterial);
@ -165,6 +158,7 @@ const groundMaterial = new THREE.MeshStandardMaterial({
texture.repeat.set(mazeWidth / 4, mazeWidth / 4) texture.repeat.set(mazeWidth / 4, mazeWidth / 4)
} }
), ),
envMap: scene.background
}) })
const sideGroundMaterial = groundMaterial.clone() const sideGroundMaterial = groundMaterial.clone()
sideGroundMaterial.map = wallMaterial.map.clone() sideGroundMaterial.map = wallMaterial.map.clone()
@ -265,10 +259,10 @@ scene.add(ocean);
const sun = new THREE.Vector3(); const sun = new THREE.Vector3();
//const ambientLight = new THREE.AmbientLight(0x404040, 7); const ambientLight = new THREE.AmbientLight(0x404040, 7);
//scene.add(ambientLight); scene.add(ambientLight);
const sunLight = new THREE.DirectionalLight(0xfffae8, 2); const sunLight = new THREE.DirectionalLight(0xfffae8, 0.5);
sunLight.castShadow = true; sunLight.castShadow = true;
sunLight.shadow.camera.near = 0.1; sunLight.shadow.camera.near = 0.1;
sunLight.shadow.camera.far = 1.4 * mazeWidth; sunLight.shadow.camera.far = 1.4 * mazeWidth;
@ -295,7 +289,7 @@ function updateSun() {
sunLight.position.copy(sun) sunLight.position.copy(sun)
//ambientLight.intensity = 5 + 5 * Math.sin(Math.max(THREE.MathUtils.degToRad(parameters.elevation), 0)); ambientLight.intensity = 5 + 5 * Math.sin(Math.max(THREE.MathUtils.degToRad(parameters.elevation), 0));
} }
@ -338,7 +332,7 @@ const raft = new THREE.Mesh(raftGeometry, [
raftSideMaterial, raftSideMaterial,
raftFaceMaterial, raftFaceMaterial,
raftSideMaterial, raftSideMaterial,
raftFaceMaterial, raftSideMaterial,
raftFaceMaterial, raftFaceMaterial,
]) ])
raft.position.set( .2, ocean.position.y, -mazeWidth/2 - 1 ); raft.position.set( .2, ocean.position.y, -mazeWidth/2 - 1 );

26
style.css
View File

@ -40,31 +40,7 @@ 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 {