gets google's model-viewer working

This commit is contained in:
buttle 2021-10-06 12:43:24 +02:00
parent 9993512ab9
commit 0bda706671
9 changed files with 56749 additions and 112 deletions

View File

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

View File

@ -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;
} }

View File

@ -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>

After

Width:  |  Height:  |  Size: 210 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

56628
asset/vendor/google/model-viewer.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

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

View File

@ -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([ $this->add([
'name' => 'o:block[__blockIndex__][o:data][title]', 'name' => 'o:block[__blockIndex__][o:data][title]',
'type' => Element\Text::class, 'type' => Element\Text::class,

View File

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

View File

@ -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')); 'Render3D'));
if ($title !== false && $title !== "") { ?>
$title = sprintf('<p id="render-3d-title">%s</p>', $title);
} else {
$title = false;
}
?>
<script> <script>
console.log(<?= json_encode($urls, JSON_UNESCAPED_SLASHES) ?>) console.log(<?= json_encode($urls, JSON_UNESCAPED_SLASHES) ?>)
</script> </script>
<style> <!--
<style>
#<?= $id ?> { #<?= $id ?> {
height: <?= $height ?>px; height: <?= $height ?>px;
width: <?= $width ?>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) { ?> <?php if ($renderSourceLink) { ?>
<div class="source-link"> <div class="source-link">
<a href="<?= $item_url ?>">Source</a> <a href="<?= $item_url ?>">Source</a>
</div> </div>
<?php } ?> <?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> </div>
<?php } ?> <?php } ?>
</model-viewer>
<?php if ($model_type == "obj") { ?>
<div id="<?= $id ?>">
<model-obj
src="<?= $urls[0]; ?>"
>
</model-obj>
</div> </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) { ?> <?php if ($title) { ?>
<div class="item_title"> <div class="item_title">
<?= $title ?> <?= $title ?>
</div> </div>
<?php } ?> <?php } ?>
</div>
<script>
new Vue({
el: "#<?= $id ?>"
})
</script>
</div> </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'));
*/
?>