making 3d models smaller

2 files changed, 20 insertions, 14 deletions

diff --git a/frontend/app/views/tile/tile.utils.js b/frontend/app/views/tile/tile.utils.js
index dc19540..c0f92a5 100644
--- a/frontend/app/views/tile/tile.utils.js
+++ b/frontend/app/views/tile/tile.utils.js
@@ -82,9 +82,12 @@ export const unitsDimension = (tile, dimension, bounds, videoBounds) => {
   return value + "px"
 }
 
-export const videoUnits = (value, bounds, videoBounds) => (
-  Math.round(value * bounds.width / videoBounds.width) + 'px'
-)
+export const videoUnits = (value, bounds, videoBounds) => {
+  if ((videoBounds.width / videoBounds.height) > (bounds.width / bounds.height)) {
+    return Math.round(value * bounds.height / videoBounds.height) + 'px'
+  }
+  return Math.round(value * bounds.width / videoBounds.width) + 'px'
+}
 
 export const hexToRgb = (hex) => {
   if (!hex) {
diff --git a/frontend/site/projects/museum/stl-files.js b/frontend/site/projects/museum/stl-files.js
index 6ac3b75..aaee6cb 100644
--- a/frontend/site/projects/museum/stl-files.js
+++ b/frontend/site/projects/museum/stl-files.js
@@ -28,11 +28,11 @@ export const STL_FILES = {
       shininess: 100,
     },
     width: () => window.innerWidth / 2,
-    height: () => window.innerHeight,
+    height: () => window.innerHeight * 3/5,
     style: {
-      right: "0",
-      top: "50%",
-      transform: "translateY(-50%)",
+      left: "0",
+      top: "0",
+      // transform: "translateY(-50%)",
     },
     transform: {
       rotate: {
@@ -50,15 +50,16 @@ export const STL_FILES = {
       shininess: 30,
     },
     width: () => window.innerWidth / 2,
-    height: () => window.innerHeight,
+    height: () => window.innerHeight * 2/3,
     style: {
       right: "0",
-      top: "0",
+      top: "50%",
+      transform: "translateY(-50%)",
     },
     transform: {
       rotate: {
         x: -Math.PI/2,
-        y: Math.PI/2,
+        y: 0, // Math.PI/2,
         z: 0,
       }
     }
@@ -70,11 +71,12 @@ export const STL_FILES = {
       color: "#bfb8a8", 
       shininess: 60,
     },
-    width: () => window.innerWidth / 2,
-    height: () => window.innerHeight,
+    width: () => window.innerWidth * 1/2,
+    height: () => window.innerHeight * 2/3,
     style: {
       right: "0",
       top: "0",
+      // transform: "translateY(-50%)",
     },
     transform: {
       rotate: {
@@ -92,10 +94,11 @@ export const STL_FILES = {
       shininess: 80,
     },
     width: () => window.innerWidth / 2,
-    height: () => window.innerHeight,
+    height: () => window.innerHeight * 2/3,
     style: {
       left: "0",
-      top: "0",
+      top: "33%",
+      transform: "translateY(-50%)",
     },
     transform: {
       rotate: {