diff --git a/main.js b/main.js index 1aea3ae..21d1484 100644 --- a/main.js +++ b/main.js @@ -15,8 +15,8 @@ import MazeMesh from './MazeMesh.js'; const mazeWidth = 23 const parameters = { - elevation: 1 + 89 * Math.random(), - azimuth: -160, + elevation: 48, + azimuth: 53, }; const waves = { @@ -71,6 +71,17 @@ container.appendChild(renderer.domElement); const scene = new THREE.Scene(); +scene.background = new THREE.CubeTextureLoader() + .setPath( 'textures/calm-sea-skybox/' ) + .load( [ + 'ft.jpg', + 'bk.jpg', + 'up.jpg', + 'dn.jpg', + 'rt.jpg', + 'lf.jpg', + ] ); + const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000); camera.rotation.order = 'YXZ'; @@ -79,11 +90,12 @@ const collisionner = new THREE.Group(); // Maze const wallMaterial = new THREE.MeshStandardMaterial({ - map: loader.load('img/stonewall-albedo.png'), - normalMap: loader.load('img/stonewall-normal.png'), - metalnessMap: loader.load('img/stonewall-metalness.png'), - aoMap: loader.load('img/stonewall-ao.png'), - roughnessMap: loader.load('img/stonewall-roughness.png'), + map : loader.load('textures/stonewall/albedo.png'), + normalMap : loader.load('textures/stonewall/normal.png'), + metalnessMap: loader.load('textures/stonewall/metalness.png'), + aoMap : loader.load('textures/stonewall/ao.png'), + roughnessMap: loader.load('textures/stonewall/roughness.png'), + envMap : scene.background }) const maze = new MazeMesh(mazeWidth, mazeWidth, 1, wallMaterial); @@ -110,40 +122,41 @@ for (let i = 0; i < maze.count; i++) { const groundGeometry = new THREE.BoxGeometry(mazeWidth, mazeWidth, 1) const groundMaterial = new THREE.MeshStandardMaterial({ map: loader.load( - 'img/angled-blocks-vegetation_albedo.png', + 'textures/angled-blocks-vegetation/albedo.png', texture => { texture.wrapS = texture.wrapT = THREE.RepeatWrapping texture.repeat.set(mazeWidth / 4, mazeWidth / 4) } ), aoMap: loader.load( - 'img/angled-blocks-vegetation_ao.png', + 'textures/angled-blocks-vegetation/ao.png', texture => { texture.wrapS = texture.wrapT = THREE.RepeatWrapping texture.repeat.set(mazeWidth / 4, mazeWidth / 4) } ), metalnessMap: loader.load( - 'img/angled-blocks-vegetation_metallic.png', + 'textures/angled-blocks-vegetation/metallic.png', texture => { texture.wrapS = texture.wrapT = THREE.RepeatWrapping texture.repeat.set(mazeWidth / 4, mazeWidth / 4) } ), normalMap: loader.load( - 'img/angled-blocks-vegetation_normal-dx.png', + 'textures/angled-blocks-vegetation/normal-dx.png', texture => { texture.wrapS = texture.wrapT = THREE.RepeatWrapping texture.repeat.set(mazeWidth / 4, mazeWidth / 4) } ), roughnessMap: loader.load( - 'img/angled-blocks-vegetation_roughness.png', + 'textures/angled-blocks-vegetation/roughness.png', texture => { texture.wrapS = texture.wrapT = THREE.RepeatWrapping texture.repeat.set(mazeWidth / 4, mazeWidth / 4) } ), + envMap: scene.background }) const sideGroundMaterial = new THREE.MeshStandardMaterial() sideGroundMaterial.map = wallMaterial.map.clone() @@ -189,7 +202,7 @@ const ocean = new Water(waterGeometry, { textureWidth: 512, textureHeight: 512, waterNormals: loader.load( - 'img/waternormals.jpg', + 'textures/waternormals.jpg', function (texture) { texture.wrapS = texture.wrapT = THREE.RepeatWrapping; } @@ -244,25 +257,12 @@ scene.add(ocean); const sun = new THREE.Vector3(); -const sky = new Sky(); -sky.scale.setScalar(10000); -scene.add(sky); - -const skyUniforms = sky.material.uniforms; - -skyUniforms['turbidity'].value = 10; -skyUniforms['rayleigh'].value = 2; -skyUniforms['mieCoefficient'].value = 0.005; -skyUniforms['mieDirectionalG'].value = 0.8; - -//const pmremGenerator = new THREE.PMREMGenerator(renderer); - // Lights const ambientLight = new THREE.AmbientLight(0x404040, 9); scene.add(ambientLight); -const sunLight = new THREE.DirectionalLight(0xfffae8, 1); +const sunLight = new THREE.DirectionalLight(0xfffae8, 0.7); sunLight.castShadow = true; sunLight.shadow.camera.near = 0.1; sunLight.shadow.camera.far = 1.4 * mazeWidth; @@ -285,22 +285,18 @@ function updateSun() { const theta = THREE.MathUtils.degToRad(parameters.azimuth); sun.setFromSphericalCoords(1.4 * mazeWidth/2, phi, theta); - - sky.material.uniforms['sunPosition'].value.copy(sun); ocean.material.uniforms['sunDirection'].value.copy(sun).normalize(); sunLight.position.copy(sun) ambientLight.intensity = 5 + 5 * Math.sin(Math.max(THREE.MathUtils.degToRad(parameters.elevation), 0)); - //scene.environment = pmremGenerator.fromScene(sky).texture; - } // Raft const raftGeometry = new THREE.BoxGeometry(1.8, .1, 1.1, 1, 1, 8) -const woodTexture = loader.load('img/wood.jpg'); +const woodTexture = loader.load('textures/wood.jpg'); const raftFaceMaterial = new THREE.MeshStandardMaterial({ map: woodTexture, aoMap: woodTexture, diff --git a/img/angled-blocks-vegetation_albedo.png b/textures/angled-blocks-vegetation/albedo.png similarity index 100% rename from img/angled-blocks-vegetation_albedo.png rename to textures/angled-blocks-vegetation/albedo.png diff --git a/img/angled-blocks-vegetation_ao.png b/textures/angled-blocks-vegetation/ao.png similarity index 100% rename from img/angled-blocks-vegetation_ao.png rename to textures/angled-blocks-vegetation/ao.png diff --git a/img/angled-blocks-vegetation_height.png b/textures/angled-blocks-vegetation/height.png similarity index 100% rename from img/angled-blocks-vegetation_height.png rename to textures/angled-blocks-vegetation/height.png diff --git a/img/angled-blocks-vegetation_metallic.png b/textures/angled-blocks-vegetation/metallic.png similarity index 100% rename from img/angled-blocks-vegetation_metallic.png rename to textures/angled-blocks-vegetation/metallic.png diff --git a/img/angled-blocks-vegetation_normal-dx.png b/textures/angled-blocks-vegetation/normal-dx.png similarity index 100% rename from img/angled-blocks-vegetation_normal-dx.png rename to textures/angled-blocks-vegetation/normal-dx.png diff --git a/img/angled-blocks-vegetation_roughness.png b/textures/angled-blocks-vegetation/roughness.png similarity index 100% rename from img/angled-blocks-vegetation_roughness.png rename to textures/angled-blocks-vegetation/roughness.png diff --git a/textures/calm-sea-skybox/bk.jpg b/textures/calm-sea-skybox/bk.jpg new file mode 100644 index 0000000..0152290 Binary files /dev/null and b/textures/calm-sea-skybox/bk.jpg differ diff --git a/textures/calm-sea-skybox/dn.jpg b/textures/calm-sea-skybox/dn.jpg new file mode 100644 index 0000000..5270feb Binary files /dev/null and b/textures/calm-sea-skybox/dn.jpg differ diff --git a/textures/calm-sea-skybox/ft.jpg b/textures/calm-sea-skybox/ft.jpg new file mode 100644 index 0000000..e19097c Binary files /dev/null and b/textures/calm-sea-skybox/ft.jpg differ diff --git a/textures/calm-sea-skybox/lf.jpg b/textures/calm-sea-skybox/lf.jpg new file mode 100644 index 0000000..c4bc05d Binary files /dev/null and b/textures/calm-sea-skybox/lf.jpg differ diff --git a/textures/calm-sea-skybox/rt.jpg b/textures/calm-sea-skybox/rt.jpg new file mode 100644 index 0000000..1891a91 Binary files /dev/null and b/textures/calm-sea-skybox/rt.jpg differ diff --git a/textures/calm-sea-skybox/up.jpg b/textures/calm-sea-skybox/up.jpg new file mode 100644 index 0000000..3c8db46 Binary files /dev/null and b/textures/calm-sea-skybox/up.jpg differ diff --git a/img/stonewall-albedo.png b/textures/stonewall/albedo.png similarity index 100% rename from img/stonewall-albedo.png rename to textures/stonewall/albedo.png diff --git a/img/stonewall-ao.png b/textures/stonewall/ao.png similarity index 100% rename from img/stonewall-ao.png rename to textures/stonewall/ao.png diff --git a/img/stonewall-height2.png b/textures/stonewall/height2.png similarity index 100% rename from img/stonewall-height2.png rename to textures/stonewall/height2.png diff --git a/img/stonewall-metalness.png b/textures/stonewall/metalness.png similarity index 100% rename from img/stonewall-metalness.png rename to textures/stonewall/metalness.png diff --git a/img/stonewall-normal.png b/textures/stonewall/normal.png similarity index 100% rename from img/stonewall-normal.png rename to textures/stonewall/normal.png diff --git a/img/stonewall-roughness.png b/textures/stonewall/roughness.png similarity index 100% rename from img/stonewall-roughness.png rename to textures/stonewall/roughness.png diff --git a/img/waternormals.jpg b/textures/waternormals.jpg similarity index 100% rename from img/waternormals.jpg rename to textures/waternormals.jpg diff --git a/img/wood.jpg b/textures/wood.jpg similarity index 100% rename from img/wood.jpg rename to textures/wood.jpg