diff --git a/public/index.html b/public/index.html index 191780b..d68e2b5 100644 --- a/public/index.html +++ b/public/index.html @@ -12,6 +12,7 @@ overflow:hidden; font-family:georgia; text-align:center; + overscroll-behavior: none; } canvas { display: block; pointer-events:none; } diff --git a/public/main.js b/public/main.js index 812ec42..678ca90 100644 --- a/public/main.js +++ b/public/main.js @@ -24,10 +24,12 @@ const init = function() { renderer = new THREE.WebGLRenderer() renderer.setPixelRatio(window.devicePixelRatio) renderer.setSize(window.innerWidth, window.innerHeight) + renderer.setClearColor (0xE0E0E0, 1); document.body.appendChild(renderer.domElement) // Events document.addEventListener('mousemove', onDocumentMouseMove, false) + window.addEventListener( 'resize', onWindowResize, false ) } // Render the current frame @@ -51,6 +53,16 @@ const onDocumentMouseMove = function(event) { mouseY = (event.clientY - windowHalfY) / 2 } +const onWindowResize = function() { + windowHalfX = window.innerWidth / 2 + windowHalfY = window.innerHeight / 2 + + camera.aspect = window.innerWidth / window.innerHeight + camera.updateProjectionMatrix() + + renderer.setSize(window.innerWidth, window.innerHeight) +} + const app = async function() { init()