82 lines
1.8 KiB
PHTML
82 lines
1.8 KiB
PHTML
|
|
<?php
|
|
$this->headLink()->appendStylesheet($this->assetUrl('css/render3d.css',
|
|
'Render3D'));
|
|
?>
|
|
|
|
<script>
|
|
console.log(<?= json_encode($urls, JSON_UNESCAPED_SLASHES) ?>)
|
|
</script>
|
|
|
|
<!--
|
|
<style>
|
|
#<?= $id ?> {
|
|
height: <?= $height ?>px;
|
|
width: <?= $width ?>px;
|
|
}
|
|
</style>
|
|
-->
|
|
<style>
|
|
model-viewer {
|
|
width: 100%;
|
|
height: 500px;
|
|
outline: none;
|
|
background-color: transparent;
|
|
}
|
|
</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"
|
|
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>
|
|
|
|
|
|
<?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'));
|
|
*/
|
|
?>
|