gets google's model-viewer working
This commit is contained in:
parent
9993512ab9
commit
0bda706671
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -1,7 +1,34 @@
|
|||
/* Panaorama viewer custom */
|
||||
@media screen {
|
||||
.render-3d {
|
||||
/* width: 600px; */
|
||||
/* height: 400px; */
|
||||
}
|
||||
|
||||
.model-3d-wrap {
|
||||
width: 100%
|
||||
}
|
||||
#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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 |
File diff suppressed because one or more lines are too long
|
|
@ -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)',
|
||||
]
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,121 +1,81 @@
|
|||
<div class="3d-model-wrap" style="position:relative;">
|
||||
|
||||
<?php
|
||||
$this->headScript()->appendFile($this->assetUrl('vendor/vue/vue.js', 'Render3D'));
|
||||
$this->headScript()->appendFile($this->assetUrl('vendor/vue-3d-model/vue-3d-model.umd.js',
|
||||
<?php
|
||||
$this->headLink()->appendStylesheet($this->assetUrl('css/render3d.css',
|
||||
'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="3d-model-wrap">
|
||||
<div class="model-3d-wrap archive-item-block">
|
||||
<?php if ($renderSourceLink) { ?>
|
||||
<div class="source-link">
|
||||
<a href="<?= $item_url ?>">Source</a>
|
||||
</div>
|
||||
<?php } ?>
|
||||
|
||||
<?php if ($model_type == "gltf") { ?>
|
||||
<div id="<?= $id ?>">
|
||||
<model-gltf
|
||||
src="<?= $urls[0]; ?>"
|
||||
@on-mousemove="onMouseMove"
|
||||
<div id="<?= $id ?>" style="display:absolute">
|
||||
<model-viewer id="<?= $id ?>_3d_model"
|
||||
reveal="interaction"
|
||||
src="<?= $urls[0] ?>"
|
||||
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 } ?>
|
||||
|
||||
<?php if ($model_type == "obj") { ?>
|
||||
<div id="<?= $id ?>">
|
||||
<model-obj
|
||||
src="<?= $urls[0]; ?>"
|
||||
>
|
||||
</model-obj>
|
||||
</model-viewer>
|
||||
</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'));
|
||||
*/
|
||||
?>
|
||||
|
|
|
|||
Loading…
Reference in New Issue