changed model viewer
This commit is contained in:
Luca Junge
parent
b31a898675
commit
a087ec4eb3
8 changed files with 262 additions and 191 deletions
328
src/_assets/model-viewer.min.js
vendored
328
src/_assets/model-viewer.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
<a href="{{ post.url }}"class="group relative rounded-lg text-gray-100">
|
||||
<a href="{{ post.url }}"class="group relative rounded-lg text-gray-100 shadow-md">
|
||||
|
||||
<!-- A container for the preview -->
|
||||
<div class="model-image-container flex bg-gray-700 rounded-lg overflow-hidden">
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/css/modelviewer.css">
|
||||
<link rel="stylesheet" href="/assets/fontawesome/css/all.css">
|
||||
<title>{{ title }}</title>
|
||||
</head>
|
||||
<body class="bg-gray-800">
|
||||
|
|
@ -14,6 +15,25 @@
|
|||
xr-environment
|
||||
camera-controls
|
||||
shadow-intensity=1>
|
||||
<div slot="ar-button" slot="exit-webxr-ar-button" id="ar-button-container">
|
||||
<button id="ar-button" title="View in Augmented Reality" class="blur">
|
||||
<i class="fa fa-solid fa-cube"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div slot="exit-webxr-ar-button" id="ar-button-container">
|
||||
<button id="ar-button" title="Close Augmented Reality" class="blur">
|
||||
<i class="fa fa-solid fa-close"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="model-info-container">
|
||||
<div id="model-info" class="blur">
|
||||
<h5>{{title}}</h5>
|
||||
<p>{{alt}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{content | safe}}
|
||||
</model-viewer>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0px;
|
||||
background-color: rgb(31 41 55);
|
||||
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
|
||||
}
|
||||
|
||||
model-viewer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 100dvh;
|
||||
background-color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
|
|
@ -16,7 +16,9 @@ model-viewer {
|
|||
}
|
||||
|
||||
.Hotspot {
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(3px);
|
||||
border-radius: 32px;
|
||||
border: 0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
||||
|
|
@ -31,7 +33,7 @@ model-viewer {
|
|||
|
||||
.Hotspot:not([data-visible]) {
|
||||
background: transparent;
|
||||
border: 4px solid #fff;
|
||||
border: 4px solid rgba(0, 0, 0, 0.5);
|
||||
box-shadow: none;
|
||||
height: 32px;
|
||||
pointer-events: none;
|
||||
|
|
@ -51,10 +53,11 @@ model-viewer {
|
|||
}
|
||||
|
||||
.HotspotAnnotation {
|
||||
background: #fff;
|
||||
backdrop-filter: blur(3px);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
color: #fff;
|
||||
display: block;
|
||||
font-family: Futura, Helvetica Neue, sans-serif;
|
||||
font-size: 18px;
|
||||
|
|
@ -140,3 +143,62 @@ model-viewer[ar-status="session-started"] > #ar-prompt {
|
|||
model-viewer > #ar-prompt > img {
|
||||
animation: circle 4s linear infinite;
|
||||
}
|
||||
|
||||
#ar-button-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 4; /* position in front of the annotations */
|
||||
bottom: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#ar-button {
|
||||
font-family: inherit; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
text-transform: none;
|
||||
margin-bottom: 20px;
|
||||
padding: 0.5em 1.75em;
|
||||
font-size: 1.75em;
|
||||
border-radius: 24px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#ar-button i {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#model-info-container {
|
||||
margin: 0.75em;
|
||||
position: relative;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
justify-content: start;
|
||||
z-index: 4; /* position in front of the annotations */
|
||||
}
|
||||
|
||||
#model-info {
|
||||
display: inline-block;
|
||||
border-radius: 24px;
|
||||
padding: 1.25rem;
|
||||
margin: 0px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#model-info h5 {
|
||||
margin: 0px;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#model-info p {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.blur {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,11 @@
|
|||
}
|
||||
|
||||
h2 {
|
||||
@apply mb-1 text-xl;
|
||||
@apply mb-1 text-xl font-bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply mb-1 text-lg font-bold;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ title: luca-junge.de
|
|||
<i class="fa fa-angle-down mr-1"></i>MODELS</span>
|
||||
</div>
|
||||
|
||||
<ul class="grid gap-5 grid-cols-1 grid-rows-1 md:grid-cols-2 md:grid-rows-2 lg:grid-cols-3 lg:grid-rows-3">
|
||||
<ul class="grid gap-5 ml-0 grid-cols-1 grid-rows-1 md:grid-cols-2 md:grid-rows-2 lg:grid-cols-3 lg:grid-rows-3">
|
||||
{% for post in collections.model %}
|
||||
{% include "model-preview.njk" %}
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,13 @@
|
|||
---
|
||||
title: Amtsgericht Varel
|
||||
file: model.glb
|
||||
alt: Ein Teil der Frontseite des Amtsgerichts in Varel
|
||||
---
|
||||
|
||||
<button class="Hotspot" slot="hotspot-1" data-surface="0 0 27445 26933 27449 0.457 0.230 0.313" data-visibility-attribute="visible">
|
||||
<div class="HotspotAnnotation">1870</div>
|
||||
</button>
|
||||
|
||||
<button class="Hotspot" slot="hotspot-2" data-surface="0 0 202893 202896 208895 0.083 0.207 0.710" data-visibility-attribute="visible">
|
||||
<div class="HotspotAnnotation">Front Door</div>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@ file: model.glb
|
|||
alt: A 3d model of a toy duck
|
||||
---
|
||||
|
||||
<button class="Hotspot" slot="hotspot-3" data-position="0.034086908507172255m 0.035633058045035026m 0.0008323315838707837m" data-normal="0.11076220205426575m 0.9733893287613071m 0.2006114384817127m" data-visibility-attribute="visible">
|
||||
<button class="Hotspot" slot="hotspot-1" data-position="0.034086908507172255m 0.035633058045035026m 0.0008323315838707837m" data-normal="0.11076220205426575m 0.9733893287613071m 0.2006114384817127m" data-visibility-attribute="visible">
|
||||
<div class="HotspotAnnotation">The Beak</div>
|
||||
</button>
|
||||
|
||||
<button class="Hotspot" slot="hotspot-4" data-position="-0.0077982119614389955m -0.008128374324366697m -0.034137767670381604m" data-normal="-0.2165819895695754m 0.2073173991125989m -0.9539977661500428m" data-visibility-attribute="visible">
|
||||
<button class="Hotspot" slot="hotspot-2" data-position="-0.0077982119614389955m -0.008128374324366697m -0.034137767670381604m" data-normal="-0.2165819895695754m 0.2073173991125989m -0.9539977661500428m" data-visibility-attribute="visible">
|
||||
<div class="HotspotAnnotation">A Wing</div>
|
||||
</button>
|
||||
|
||||
<button class="Hotspot" slot="hotspot-5" data-position="-0.04329843722003483m 0.011786457618276569m 0.0029983665888340706m" data-normal="-0.7752145503176167m 0.6212154023517756m 0.11460290073456728m" data-visibility-attribute="visible">
|
||||
<button class="Hotspot" slot="hotspot-3" data-position="-0.04329843722003483m 0.011786457618276569m 0.0029983665888340706m" data-normal="-0.7752145503176167m 0.6212154023517756m 0.11460290073456728m" data-visibility-attribute="visible">
|
||||
<div class="HotspotAnnotation">The Tail</div>
|
||||
</button>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue