diff --git a/src/_includes/modelviewer.njk b/src/_includes/modelviewer.njk index 6f4042e..382e13a 100644 --- a/src/_includes/modelviewer.njk +++ b/src/_includes/modelviewer.njk @@ -8,15 +8,9 @@ {{ title }} -
- -
+ + {{content | safe}} + diff --git a/src/css/modelviewer.css b/src/css/modelviewer.css index cc283de..86d8a6a 100644 --- a/src/css/modelviewer.css +++ b/src/css/modelviewer.css @@ -1,176 +1,142 @@ -html, body { - margin: 0; - padding: 0; - overflow: hidden; - height: 100%; + margin: 0; + padding: 0; + width: 100vw; + height: 100vh; } model-viewer { - height: 100vh; - width: 100% + width: 100%; + height: 90%; + background-color: #ffffff; } -:not(:defined)>* { - display: none; +:not(:defined) > * { + display: none; } - .Hotspot { - background: #fff; - border-radius: 32px; - border: 0; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); - box-sizing: border-box; - cursor: pointer; - height: 24px; - padding: 8px; - position: relative; - transition: opacity 0.3s; - width: 24px; + background: #fff; + border-radius: 32px; + border: 0; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); + box-sizing: border-box; + cursor: pointer; + height: 24px; + padding: 8px; + position: relative; + transition: opacity 0.3s; + width: 24px; } .Hotspot:not([data-visible]) { - background: transparent; - border: 4px solid #fff; - box-shadow: none; - height: 32px; - pointer-events: none; - width: 32px; + background: transparent; + border: 4px solid #fff; + box-shadow: none; + height: 32px; + pointer-events: none; + width: 32px; } .Hotspot:focus { - border: 4px solid rgb(0, 128, 200); - height: 32px; - outline: none; - width: 32px; + border: 4px solid rgb(0, 128, 200); + height: 32px; + outline: none; + width: 32px; } -.Hotspot>* { - opacity: 1; - transform: translateY(-50%); +.Hotspot > * { + opacity: 1; + transform: translateY(-50%); } .HotspotAnnotation { - background: #fff; - border-radius: 4px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); - color: rgba(0, 0, 0, 0.8); - display: block; - font-family: Futura, Helvetica Neue, sans-serif; - font-size: 18px; - font-weight: 700; - left: calc(100% + 1em); - max-width: 128px; - overflow-wrap: break-word; - padding: 0.5em 1em; - position: absolute; - top: 50%; - width: max-content; + background: #fff; + border-radius: 4px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); + color: rgba(0, 0, 0, 0.8); + display: block; + font-family: Futura, Helvetica Neue, sans-serif; + font-size: 18px; + font-weight: 700; + left: calc(100% + 1em); + max-width: 128px; + overflow-wrap: break-word; + padding: 0.5em 1em; + position: absolute; + top: 50%; + width: max-content; } -.Hotspot:not([data-visible])>* { - opacity: 0; - pointer-events: none; - transform: translateY(calc(-50% + 4px)); - transition: transform 0.3s, opacity 0.3s; +.Hotspot:not([data-visible]) > * { + opacity: 0; + pointer-events: none; + transform: translateY(calc(-50% + 4px)); + transition: transform 0.3s, opacity 0.3s; } - .progress-bar { - display: block; - width: 33%; - height: 10%; - max-height: 2%; - position: absolute; - left: 50%; - top: 50%; - transform: translate3d(-50%, -50%, 0); - border-radius: 25px; - box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.5), 0px 0px 5px 1px rgba(0, 0, 0, 0.6); - border: 1px solid rgba(255, 255, 255, 0.9); - background-color: rgba(0, 0, 0, 0.5); + display: block; + width: 33%; + height: 10%; + max-height: 2%; + position: absolute; + left: 50%; + top: 50%; + transform: translate3d(-50%, -50%, 0); + border-radius: 25px; + box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.5), + 0px 0px 5px 1px rgba(0, 0, 0, 0.6); + border: 1px solid rgba(255, 255, 255, 0.9); + background-color: rgba(0, 0, 0, 0.5); } .progress-bar.hide { - visibility: hidden; - transition: visibility 0.3s; + visibility: hidden; + transition: visibility 0.3s; } .update-bar { - background-color: rgba(255, 255, 255, 0.9); - width: 0%; - height: 100%; - border-radius: 25px; - float: left; - transition: width 0.3s; -} - -#ar-button { - background-image: url(ar_icon.png); - background-repeat: no-repeat; - background-size: 20px 20px; - background-position: 12px 50%; - background-color: #fff; - position: absolute; - left: 50%; - transform: translateX(-50%); - white-space: nowrap; - bottom: 16px; - padding: 0px 16px 0px 40px; - font-family: Roboto Regular, Helvetica Neue, sans-serif; - font-size: 14px; - color: #4285f4; - height: 36px; - line-height: 36px; - border-radius: 18px; - border: 1px solid #DADCE0; -} - -#ar-button:active { - background-color: #E8EAED; -} - -#ar-button:focus { - outline: none; -} - -#ar-button:focus-visible { - outline: 1px solid #4285f4; + background-color: rgba(255, 255, 255, 0.9); + width: 0%; + height: 100%; + border-radius: 25px; + float: left; + transition: width 0.3s; } @keyframes circle { - from { - transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg); - } + from { + transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg); + } - to { - transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg); - } + to { + transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg); + } } @keyframes elongate { - from { - transform: translateX(100px); - } + from { + transform: translateX(100px); + } - to { - transform: translateX(-100px); - } + to { + transform: translateX(-100px); + } } -model-viewer>#ar-prompt { - position: absolute; - left: 50%; - bottom: 60px; - animation: elongate 2s infinite ease-in-out alternate; - display: none; +model-viewer > #ar-prompt { + position: absolute; + left: 50%; + bottom: 60px; + animation: elongate 2s infinite ease-in-out alternate; + display: none; } -model-viewer[ar-status="session-started"]>#ar-prompt { - display: block; +model-viewer[ar-status="session-started"] > #ar-prompt { + display: block; } -model-viewer>#ar-prompt>img { - animation: circle 4s linear infinite; -} \ No newline at end of file +model-viewer > #ar-prompt > img { + animation: circle 4s linear infinite; +} diff --git a/src/models/stadttheater-bremerhaven/index.md b/src/models/stadttheater-bremerhaven/index.md new file mode 100644 index 0000000..d514027 --- /dev/null +++ b/src/models/stadttheater-bremerhaven/index.md @@ -0,0 +1,5 @@ +--- +title: Stadttheater Bremerhaven +alt: Ein 3D-Modell des Stadttheaters in Bremerhaven +fieldofview: 45deg +--- diff --git a/src/models/stadttheater-bremerhaven/model.glb b/src/models/stadttheater-bremerhaven/model.glb new file mode 100644 index 0000000..a42df16 Binary files /dev/null and b/src/models/stadttheater-bremerhaven/model.glb differ diff --git a/src/models/toy-duck/index.md b/src/models/toy-duck/index.md index 043c586..4eb71e9 100644 --- a/src/models/toy-duck/index.md +++ b/src/models/toy-duck/index.md @@ -6,8 +6,12 @@ file: model.glb + + \ No newline at end of file + + +