arcHIVE-tech
/
3D-Renderer-omeka-module
4
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

renders width and ratio correctly

This commit is contained in:
buttle 2021-10-13 13:12:29 +02:00
parent a0fea7e99c
commit f303e636ad
5 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Module.php
View File

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

4
asset/css/render3d.css
View File

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

5
asset/js/height_calculator.js Normal file
View File

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

11
src/Site/BlockLayout/Render3D.php
View File

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

5
view/common/block-layout/render-3d.phtml
View File

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