gets google's model-viewer working

Module.php

@@ -11,6 +11,7 @@ class Module extends AbstractModule
 
 	const MODEL_TYPES = [
 			'gltf' => 'gLTF',
+			/*
 			'obj' => 'OBJ',
 			'obj+mtl' => 'OBJ + MTL',
 			'json' => 'JSON',
@@ -18,6 +19,7 @@ class Module extends AbstractModule
 			'stl' => 'STL',
 			'dae' => 'Collada .dae',
 			'ply' => 'PLY',
+			*/
 	];
 
 	public function getConfig()

asset/css/render3d.css

@@ -1,7 +1,34 @@
-/* Panaorama viewer custom */
+
-@media screen {
+.model-3d-wrap {
-    .render-3d {
+  width: 100%
-        /* width: 600px; */
+}
-        /* height: 400px; */
+#lazy-load-poster {
-    }
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-image: url("/modules/Render3D/asset/img/pre-load-image.jpg");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+#button-load {
+  background-image: url("/modules/Render3D/asset/img/ic_get_app_white_24dp.svg");
+  background-repeat: no-repeat;
+  background-size: 24px 24px;
+  background-position: 6% 50%;
+  background-color: #000;
+  color: white;
+  cursor: pointer;
+  border-radius: 6px;
+  display: inline-block;
+  padding: 10px 18px 9px 40px;
+  font-weight: 500;
+  box-shadow: 0 0 8px rgba(0,0,0,.2), 0 0 4px rgba(0,0,0,.25);
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  z-index: 100;
 }

asset/img/ic_get_app_white_24dp.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF">
+    <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

config/module.config.php

@@ -22,9 +22,9 @@ return [
             'model_type' => 'gltf',
             'title' => '',
             'renderSourceLink' => true,
+            //'addPreLoadImage' => true,
             'width' => 600,
             'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;',
-            //'imgStyle' => '',
             'ui_background' => 'rgba(0,0,0,0.1)',
         ]
     ]

src/Form/Render3DBlockForm.php

@@ -42,6 +42,19 @@ class Render3DBlockForm extends Form
 		    ],
 		]);
 
+		/*
+		$this->add([
+				'type' => Element\Checkbox::class,
+				'name' => 'o:block[__blockIndex__][o:data][addPreLoadImage]',
+				'options' => [
+						'label' => 'Display the preload image',
+						//'use_hidden_element' => true,
+						'checked_value' => true,
+						'unchecked_value' => false,
+				],
+		]);
+		*/
+		
 		$this->add([
 			'name' => 'o:block[__blockIndex__][o:data][title]',
 			'type' => Element\Text::class,

src/Site/BlockLayout/Render3D.php

@@ -51,6 +51,7 @@ class Render3D extends AbstractBlockLayout
 			'o:block[__blockIndex__][o:data][title]' => $data['title'],
 			'o:block[__blockIndex__][o:data][width]' => $data['width'],
       'o:block[__blockIndex__][o:data][renderSourceLink]' => $data['renderSourceLink'],
+      //'o:block[__blockIndex__][o:data][addPreLoadImage]' => $data['addPreLoadImage'],
 		]);
 		$form->prepare();
 
@@ -97,6 +98,8 @@ class Render3D extends AbstractBlockLayout
 			'height' => $height,
       'item_url' => $attachments[0]->item()->url(),
       'renderSourceLink' => $block->dataValue('renderSourceLink'),
+      'addPreLoadImage' => 1,
+      'skybox' => 0,
 			'urls' => $urls,
       'id' => 'v3d-' . ++$id,
       'mediaTypes' => $media_types,

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

@@ -1,121 +1,81 @@
-<div class="3d-model-wrap" style="position:relative;">
 
-	<?php
+<?php
-		$this->headScript()->appendFile($this->assetUrl('vendor/vue/vue.js', 'Render3D'));
+$this->headLink()->appendStylesheet($this->assetUrl('css/render3d.css',
-		$this->headScript()->appendFile($this->assetUrl('vendor/vue-3d-model/vue-3d-model.umd.js',
 																										'Render3D'));
-		if ($title !== false && $title !== "") {
+?>
-			$title = sprintf('<p id="render-3d-title">%s</p>', $title);
-		} else {
-			$title = false;
-		}
-	?>
 
 <script>
 console.log(<?= json_encode($urls, JSON_UNESCAPED_SLASHES) ?>)
 </script>
 
-	<style>
+<!--
+<style>
 	#<?= $id ?> {
 		height: <?= $height ?>px;
 		width: <?= $width ?>px;
 	}
-	</style>
+</style>
+-->
+<style>
+model-viewer {
+  width: 100%;
+  height: 500px;
+  outline: none;
+  background-color: transparent;
+}
+</style>
 
-
+<div class="model-3d-wrap archive-item-block">
-	<div class="3d-model-wrap">
 	<?php if ($renderSourceLink) { ?>
 	<div class="source-link">
 		<a href="<?= $item_url ?>">Source</a>
 	</div>
 	<?php } ?>
 
-	<?php if ($model_type == "gltf") { ?>
+	<div id="<?= $id ?>" style="display:absolute">
-		<div id="<?= $id ?>">
+    <model-viewer id="<?= $id ?>_3d_model"
-      <model-gltf
+                  reveal="interaction"
-        src="<?= $urls[0]; ?>"
+                  src="<?= $urls[0] ?>"
-        @on-mousemove="onMouseMove"
+                  alt="A 3D model of a robot"
+                  auto-rotate=""
+                  camera-controls=""
+                  background-color="#455A64"
+                  <?php if ($skybox) { ?>
+                  skybox-image="{{ object['skybox'] }}"
+									<?php } ?>
     >
-      </model-gltf>
+			<?php if($addPreLoadImage) { ?>
+	    <div id="lazy-load-poster"
+					 class="lazy-load-poster"
+					 slot="poster">
+			</div>
+	    <div id="button-load"
+					 class="button-load"
+					 slot="poster">
+				Load 3D Model
 			</div>
 			<?php } ?>
-
+    </model-viewer>
-	<?php if ($model_type == "obj") { ?>
-		<div id="<?= $id ?>">
-			<model-obj
-				src="<?= $urls[0]; ?>"
-			>
-			</model-obj>
   </div>
-	<?php } ?>
-
-	<?php if ($model_type == "obj+mtl") { ?>
-		<div id="<?= $id ?>">
-			<model-obj
-				src="<?= $urls[0]; ?>"
-				mtl="<?= $urls[1]; ?>"
-			>
-			</model-obj>
-		</div>
-	<?php } ?>
-
-	<?php if ($model_type == "json") { ?>
-		<div id="<?= $id ?>">
-			<model-three
-				src="<?= $urls[0]; ?>"
-			>
-			</model-three>
-		</div>
-	<?php } ?>
-
-	<?php if ($model_type == "fbx") { ?>
-		<div id="<?= $id ?>">
-			<model-fbx
-				src="<?= $urls[0]; ?>"
-			>
-			</model-fbx>
-		</div>
-	<?php } ?>
-
-	<?php if ($model_type == "stl") { ?>
-		<div id="<?= $id ?>">
-			<model-stl
-				src="<?= $urls[0]; ?>"
-			>
-			</model-stl>
-		</div>
-	<?php } ?>
-
-	<?php if ($model_type == "dae") { ?>
-		<div id="<?= $id ?>">
-			<model-collada
-				src="<?= $urls[0]; ?>"
-			>
-			</model-collada>
-		</div>
-	<?php } ?>
-
-	<?php if ($model_type == "ply") { ?>
-		<div id="<?= $id ?>">
-			<model-ply
-				src="<?= $urls[0]; ?>"
-			>
-			</model-ply>
-		</div>
-	<?php } ?>
 
 	<?php if ($title) { ?>
 		<div class="item_title">
 			<?= $title ?>
 		</div>
   <?php } ?>
-	
-	</div>
-
-	<script>
-		new Vue({
-			el: "#<?= $id ?>"
-		})
-	</script>
-
 </div>
+
+<script type="module" src="/modules/Render3D/asset/vendor/google/model-viewer.js"></script>
+
+
+<?php
+/*
+echo $this->inlineScript()
+          ->prependFile($this->assetUrl('/vendor/google/model-viewer.js?v=1"',
+                                        'Render3D'));
+*/
+/*
+$this->headScript()->appendFile($this->assetUrl('/vendor/google/model-viewer.js?v=1',
+																								'Render3D'));
+*/
+?>