diff --git a/css/style.css b/css/style.css index 1716bc9..e74ba5a 100644 --- a/css/style.css +++ b/css/style.css @@ -81,7 +81,7 @@ html, body{ min-height:100vh; margin:0px; padding: 0; - /* display:flex; */ + background-color: white; justify-content: center; align-items: center; flex-direction: column; diff --git a/js/threeBackground.js b/js/threeBackground.js index c35ea74..81009d8 100644 --- a/js/threeBackground.js +++ b/js/threeBackground.js @@ -1,105 +1,101 @@ +var camera, clock, scene, renderer; +var geometry, position, plane; -var camera, clock, scene, renderer -var geometry, position, plane - - -const textureURL = 'http://commonzenmedia.com/images/dots.png' - +const textureURL = "https://commonzenmedia.com/images/dots.png"; function init() { - - scene = new THREE.Scene() - - clock = new THREE.Clock() - - //Renderer - renderer = new THREE.WebGLRenderer({antialias: true}) - renderer.setPixelRatio( window.devicePixelRatio ) - renderer.setSize( window.innerWidth, window.innerHeight ) - renderer.setClearColor( 0xffffff ) - document.body.appendChild( renderer.domElement ) - - //Camera - camera = new THREE.PerspectiveCamera (69, window.innerWidth / window.innerHeight, 1, 20000) - camera.position.set( -20, 100 , -200 ) - camera.rotateY(-Math.PI) - - //Plane - geometry = new THREE.PlaneBufferGeometry( 2000, 2000, 1000, 1000) - geometry.rotateX( - Math.PI / 2 ); - position = geometry.attributes.position - position.dynamic = true - - //Texture - var texture = new THREE.TextureLoader().load( textureURL ) - var material = new THREE.MeshBasicMaterial({color: 0xffffff}); - material.map = texture; - plane = new THREE.Mesh ( geometry, material ) - scene.add( plane ) - - - //Light - var light = new THREE.PointLight( 0xfffff, 1, 100 ); - light.position.set( 50, 50, 50 ); - scene.add( light ); - - //Resizing - window.addEventListener( 'resize', onWindowResize, false) - + scene = new THREE.Scene(); + + clock = new THREE.Clock(); + + //Renderer + renderer = new THREE.WebGLRenderer({ antialias: true }); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setClearColor(0xffffff); + document.body.appendChild(renderer.domElement); + + //Camera + camera = new THREE.PerspectiveCamera( + 69, + window.innerWidth / window.innerHeight, + 1, + 20000 + ); + camera.position.set(-20, 100, -200); + camera.rotateY(-Math.PI); + + //Plane + geometry = new THREE.PlaneBufferGeometry(2000, 2000, 1000, 1000); + geometry.rotateX(-Math.PI / 2); + position = geometry.attributes.position; + position.dynamic = true; + + //Texture + var texture = new THREE.TextureLoader().load(textureURL, function () { + // Show the canvas once the texture is loaded + renderer.domElement.style.display = "block"; + }); + var material = new THREE.MeshBasicMaterial({ color: 0xffffff }); + material.map = texture; + plane = new THREE.Mesh(geometry, material); + scene.add(plane); + + //Light + var light = new THREE.PointLight(0xfffff, 1, 100); + light.position.set(50, 50, 50); + scene.add(light); + + //Resizing + window.addEventListener("resize", onWindowResize, false); } function animate() { - requestAnimationFrame( animate ) + requestAnimationFrame(animate); - render() + render(); } +let waveSpeed = 0.6; -let waveSpeed = 0.6 - -let waveHeightMax = 60 - -let waveHeight = 50 +let waveHeightMax = 60; -let waveHeightMin = 40 +let waveHeight = 50; -let waveHeightChangeSpeed = 0.2 +let waveHeightMin = 40; +let waveHeightChangeSpeed = 0.2; function randomizeWaveHeight() { - Math.random() > 0.5 ? waveHeight += waveHeightChangeSpeed : waveHeight -= waveHeightChangeSpeed - if (waveHeight > waveHeightMax) waveHeight = waveHeightMax - if (waveHeight < waveHeightMin) waveHeight = waveHeightMin + Math.random() > 0.5 + ? (waveHeight += waveHeightChangeSpeed) + : (waveHeight -= waveHeightChangeSpeed); + if (waveHeight > waveHeightMax) waveHeight = waveHeightMax; + if (waveHeight < waveHeightMin) waveHeight = waveHeightMin; } function moveTheWave() { - var time = clock.getElapsedTime() * (200000 * waveSpeed); - for ( var i = 0; i < position.count; i ++ ) { - var y = 50 * Math.sin( (time+i) * (1/200000) *2); - position.setY( i, y ); - } - position.needsUpdate = true; + var time = clock.getElapsedTime() * (200000 * waveSpeed); + for (var i = 0; i < position.count; i++) { + var y = 50 * Math.sin((time + i) * (1 / 200000) * 2); + position.setY(i, y); + } + position.needsUpdate = true; } function render() { + randomizeWaveHeight(); + moveTheWave(); - randomizeWaveHeight() - moveTheWave() - - camera.lookAt(new THREE.Vector3(600, 0, 100)) - renderer.render( scene, camera ); + camera.lookAt(new THREE.Vector3(600, 0, 100)); + renderer.render(scene, camera); } - - function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight - camera.updateProjectionMatrix() - renderer.setSize( window.innerWidth, window.innerHeight ) + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + renderer.setSize(window.innerWidth, window.innerHeight); } - - - -init() -animate() \ No newline at end of file +init(); +animate();