play with sizing, and stop bobbing and rotation

src/components/World/components/objects/terrain.js

@@ -34,6 +34,11 @@ export default function createTerrain(props) {
 
   plane.geometry.attributes.position.randomValues = props.randVertexArr;
 
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  plane.tick = () => {};
+  /**
+   * This makes the terrain bob up and down.
+   *
   let frame = 0;
   plane.tick = () => {
     frame += 0.01;
@@ -55,6 +60,7 @@ export default function createTerrain(props) {
     }
     plane.geometry.attributes.position.needsUpdate = true;
   };
+   **/
 
   return plane;
 }

src/components/World/systems/Resizer.js

@@ -1,8 +1,15 @@
 const setSize = (container, camera, renderer) => {
-  camera.aspect = window.innerWidth / window.innerHeight;
+  // These are great for full-screen, which adjusts to a window.
+  const height = window.innerHeight;
+  const width = window.innerWidth - 50;
+  // These are better for fitting in a container, which stays that size.
+  //const height = container.scrollHeight;
+  //const width = container.scrollWidth;
+
+  camera.aspect = width / height;
   camera.updateProjectionMatrix();
 
-  renderer.setSize(window.innerWidth, window.innerHeight);
+  renderer.setSize(width, height);
   renderer.setPixelRatio(window.devicePixelRatio);
 };
 

src/components/World/systems/controls.js

@@ -6,8 +6,8 @@ function createControls(camera, canvas) {
 
   //enable controls?
   controls.enabled = true;
-  controls.autoRotate = true;
-  controls.autoRotateSpeed = 0.2;
+  controls.autoRotate = false;
+  //controls.autoRotateSpeed = 0.2;
 
   // control limits
   // It's recommended to set some control boundaries,

src/views/StatisticsView.vue

@@ -53,8 +53,9 @@
     <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
       Your Statistics
     </h1>
-    <div id="scene-container"></div>
-    <canvas ref="worldCanvas"></canvas>
+
+    <!-- Another place to play with the sizing is in Resizer.setSize -->
+    <div id="scene-container" class="h-screen"></div>
   </section>
 </template>
 
@@ -71,13 +72,3 @@ export default class StatisticsView extends Vue {
   }
 }
 </script>
-
-<style>
-#scene-container {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-}
-</style>