renders width and ratio correctly

Module.php

@@ -10,7 +10,7 @@ class Module extends AbstractModule
 	const NAMESPACE = __NAMESPACE__;
 
 	const MODEL_TYPES = [
-			'gltf' => 'gLTF',
+			'gltf' => 'gLTF / GLB',
 			/*
 			'obj' => 'OBJ',
 			'obj+mtl' => 'OBJ + MTL',

asset/css/render3d.css

@@ -1,7 +1,9 @@
 
+/*
 .model-3d-wrap {
   width: 100%
 }
+*/
 #lazy-load-poster {
   position: absolute;
   left: 0;
@@ -9,7 +11,7 @@
   top: 0;
   bottom: 0;
   background-image: url("/modules/Render3D/asset/img/pre-load-image.jpg");
-  background-size: contain;
+  background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
 }

asset/js/height_calculator.js

@@ -0,0 +1,5 @@
+function get_height(container, ratio) {
+  var height = $(container).width() / ratio
+  //console.log(ratio, $(container).width(), height)
+  return height
+}

src/Site/BlockLayout/Render3D.php

@@ -74,7 +74,7 @@ class Render3D extends AbstractBlockLayout
 
 		$urls = [];
     $media_types = [];
-    $thumbnails = [];
+    //$thumbnails = [];
     $model_type = $block->dataValue('model_type');
 		static $id = 0;
 
@@ -87,11 +87,9 @@ class Render3D extends AbstractBlockLayout
 
         array_push($urls, $media->originalUrl());
 				array_push($media_types, $mediaType);
-        array_push($thumbnails, $media->thumbnailUrls());
+        //array_push($thumbnails, $media->thumbnailUrls());
 			}
 		}
-    $width = $block->dataValue('width');
-    $height = $width;
     $skybox = null;
     foreach($urls as $url) {
       if (strpos($url, "sky-box-image")) {
@@ -101,9 +99,8 @@ class Render3D extends AbstractBlockLayout
 		return $view->partial('common/block-layout/render-3d', [
 			'model_type' => $model_type,
 			'title' => $block->dataValue('title'),
-			'width' => $width,
+			'width' => $block->dataValue('width'),
 			'ratio' => $block->dataValue('ratio'),
-			'height' => $height,
       'item_url' => $attachments[0]->item()->url(),
       'renderSourceLink' => $block->dataValue('renderSourceLink'),
       'addPreLoadImage' => 1,
@@ -111,7 +108,7 @@ class Render3D extends AbstractBlockLayout
 			'urls' => $urls,
       'id' => 'v3d-' . ++$id,
       'mediaTypes' => $media_types,
-      'thumbnails' => $thumbnails,
+      //'thumbnails' => $thumbnails,
 		]);
 	}
 }

view/common/block-layout/render-3d.phtml

@@ -2,6 +2,8 @@
 <?php
 $this->headLink()->appendStylesheet($this->assetUrl('css/render3d.css',
 																										'Render3D'));
+$this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
+                                                  'Render3D'));
 ?>
 
 <script>
@@ -35,6 +37,7 @@ model-viewer {
 
 	<div id="<?= $id ?>" style="display:absolute">
     <model-viewer id="<?= $id ?>_3d_model"
+									style="width: <?= $width ?>%"
                   reveal="interaction"
                   src="<?= $urls[0] ?>"
                   alt="A 3D model of a robot"
@@ -72,6 +75,8 @@ model-viewer {
 <script>
 $( document ).ready(function() {
     $("model-viewer").css('visibility', 'visible')
+		var height = get_height('#<?= $id ?>_3d_model', <?= $ratio ?>)
+		$('#<?= $id ?>_3d_model').css('height', height+'px')
 });
 </script>