82 lines
2.0 KiB
PHTML
82 lines
2.0 KiB
PHTML
|
|
<?php
|
|
$this->headLink()->appendStylesheet($this->assetUrl('css/render3d.css',
|
|
'Render3D'));
|
|
$this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
|
|
'Render3D'));
|
|
?>
|
|
|
|
<style>
|
|
model-viewer {
|
|
width: 100%;
|
|
height: 500px;
|
|
outline: none;
|
|
background-color: transparent;
|
|
visibility: hidden;
|
|
}
|
|
</style>
|
|
|
|
<div class="model-3d-wrap archive-item-block">
|
|
<?php if ($renderSourceLink) { ?>
|
|
<div class="source-link">
|
|
<a href="<?= $item_url ?>">Source</a>
|
|
</div>
|
|
<?php } ?>
|
|
|
|
<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"
|
|
auto-rotate=""
|
|
camera-controls=""
|
|
background-color="#455A64"
|
|
<?php if ($skybox) { ?>
|
|
skybox-image="<?= $skybox ?>"
|
|
<?php } ?>
|
|
>
|
|
<?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>
|
|
</div>
|
|
|
|
<?php if ($title) { ?>
|
|
<div class="item_title">
|
|
<?= $title ?>
|
|
</div>
|
|
<?php } ?>
|
|
</div>
|
|
|
|
<script type="module" src="/modules/Render3D/asset/vendor/google/model-viewer.js"></script>
|
|
|
|
|
|
<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>
|
|
|
|
<?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'));
|
|
*/
|
|
?>
|