Resized viewport on window resize. Used light gray bg.

muonlineph · Mar 22, 2020 · 18972fd · 18972fd
1 parent 0d5d166
commit 18972fd
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git 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; }
   </style>

diff --git 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()