luca/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added first modelviewer example

Browse source
This commit is contained in:
Luca Junge 2022-11-10 19:05:53 +01:00
parent ed7ab76ad9
commit 1326d54083
13 changed files with 1406 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

9
.eleventy.js
View file

@ -1,10 +1,19 @@
const { DateTime } = require("luxon")
module.exports = function (eleventyConfig) { module.exports = function (eleventyConfig) {
//eleventyConfig.addPassthroughCopy("css") //eleventyConfig.addPassthroughCopy("css")
eleventyConfig.addPassthroughCopy("src/**/*.png") eleventyConfig.addPassthroughCopy("src/**/*.png")
eleventyConfig.addPassthroughCopy("src/**/*.jpg") eleventyConfig.addPassthroughCopy("src/**/*.jpg")
eleventyConfig.addPassthroughCopy("src/css/modelviewer.css")
eleventyConfig.addPassthroughCopy("src/**/*.glb") eleventyConfig.addPassthroughCopy("src/**/*.glb")
eleventyConfig.addPassthroughCopy({ "src/_assets/": "assets" })
eleventyConfig.addFilter("readableDate", (dateObj) => {
return DateTime.fromJSDate(dateObj, {
zone: "Europe/Berlin"
}).setLocale("de").toLocaleString(DateTime.DATE_FULL)
})
return { return {
passthroughFileCopy: true, passthroughFileCopy: true,
dir: { dir: {

34
package-lock.json generated
View file

@ -8,6 +8,9 @@
"name": "website", "name": "website",
"version": "0.0.1", "version": "0.0.1",
"license": "GPL-3.0-or-later", "license": "GPL-3.0-or-later",
"dependencies": {
"luxon": "^3.1.0"
},
"devDependencies": { "devDependencies": {
"@11ty/eleventy": "^1.0.2", "@11ty/eleventy": "^1.0.2",
"autoprefixer": "^10.4.13", "autoprefixer": "^10.4.13",
@ -92,6 +95,15 @@
"url": "https://opencollective.com/11ty" "url": "https://opencollective.com/11ty"
} }
}, },
"node_modules/@11ty/eleventy/node_modules/luxon": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/luxon/-/luxon-2.5.0.tgz",
"integrity": "sha512-IDkEPB80Rb6gCAU+FEib0t4FeJ4uVOuX1CQ9GsvU3O+JAGIgu0J7sf1OarXKaKDygTZIoJyU6YdZzTFRu+YR0A==",
"dev": true,
"engines": {
"node": ">=12"
}
},
"node_modules/@babel/helper-string-parser": { "node_modules/@babel/helper-string-parser": {
"version": "7.19.4", "version": "7.19.4",
"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
@ -2421,10 +2433,9 @@
} }
}, },
"node_modules/luxon": { "node_modules/luxon": {
"version": "2.5.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/luxon/-/luxon-2.5.0.tgz", "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.1.0.tgz",
"integrity": "sha512-IDkEPB80Rb6gCAU+FEib0t4FeJ4uVOuX1CQ9GsvU3O+JAGIgu0J7sf1OarXKaKDygTZIoJyU6YdZzTFRu+YR0A==", "integrity": "sha512-7w6hmKC0/aoWnEsmPCu5Br54BmbmUp5GfcqBxQngRcXJ+q5fdfjEzn7dxmJh2YdDhgW8PccYtlWKSv4tQkrTQg==",
"dev": true,
"engines": { "engines": {
"node": ">=12" "node": ">=12"
} }
@ -4874,6 +4885,14 @@
"recursive-copy": "^2.0.14", "recursive-copy": "^2.0.14",
"semver": "^7.3.7", "semver": "^7.3.7",
"slugify": "^1.6.5" "slugify": "^1.6.5"
},
"dependencies": {
"luxon": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/luxon/-/luxon-2.5.0.tgz",
"integrity": "sha512-IDkEPB80Rb6gCAU+FEib0t4FeJ4uVOuX1CQ9GsvU3O+JAGIgu0J7sf1OarXKaKDygTZIoJyU6YdZzTFRu+YR0A==",
"dev": true
}
} }
}, },
"@11ty/eleventy-utils": { "@11ty/eleventy-utils": {
@ -6643,10 +6662,9 @@
} }
}, },
"luxon": { "luxon": {
"version": "2.5.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/luxon/-/luxon-2.5.0.tgz", "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.1.0.tgz",
"integrity": "sha512-IDkEPB80Rb6gCAU+FEib0t4FeJ4uVOuX1CQ9GsvU3O+JAGIgu0J7sf1OarXKaKDygTZIoJyU6YdZzTFRu+YR0A==", "integrity": "sha512-7w6hmKC0/aoWnEsmPCu5Br54BmbmUp5GfcqBxQngRcXJ+q5fdfjEzn7dxmJh2YdDhgW8PccYtlWKSv4tQkrTQg=="
"dev": true
}, },
"markdown-it": { "markdown-it": {
"version": "12.3.2", "version": "12.3.2",

3
package.json
View file

@ -24,5 +24,8 @@
"prettier": "2.7.1", "prettier": "2.7.1",
"prettier-plugin-tailwindcss": "^0.1.13", "prettier-plugin-tailwindcss": "^0.1.13",
"tailwindcss": "^3.2.1" "tailwindcss": "^3.2.1"
},
"dependencies": {
"luxon": "^3.1.0"
} }
} }

1126
src/_assets/model-viewer.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

22
src/_includes/modelviewer.njk Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
<title>{{ title }}</title>
</head>
<body>
<main>
<model-viewer src="{{file}}" ar camera-controls shadow-intensity=1><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">
<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">
<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">
<div class="HotspotAnnotation">The Tail</div>
</button></model-viewer>
</main>
<script type="module" src="/assets/model-viewer.min.js"></script>
</body>
</html>

7
src/_includes/post.njk
View file

@ -9,7 +9,12 @@
</head> </head>
<body> <body>
{% include "partials/nav.njk" %} {% include "partials/nav.njk" %}
<div class="max-w-sm p-3 m-4 rounded-lg shadow-lg">Testing tailwind</div>
<aside>
<h1>{{ title }}</h1>
<span>von {{ author }} am {{ page.date | readableDate }}</span>
</aside>
<main> <main>
{{ content | safe }} {{ content | safe }}
</main> </main>

176
src/css/modelviewer.css Normal file
View file

@ -0,0 +1,176 @@
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
model-viewer {
height: 100vh;
width: 100%
}
: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;
}
.Hotspot:not([data-visible]) {
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;
}
.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;
}
.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);
}
.progress-bar.hide {
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;
}
@keyframes circle {
from {
transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg);
}
to {
transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg);
}
}
@keyframes elongate {
from {
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-status="session-started"]>#ar-prompt {
display: block;
}
model-viewer>#ar-prompt>img {
animation: circle 4s linear infinite;
}

13
src/index.njk
View file

@ -1,6 +1,6 @@
--- ---
layout: layout.njk layout: layout.njk
title: The Best Eleventy Demo TM title: luca-junge.de
--- ---
<h1>Neueste Posts:</h1> <h1>Neueste Posts:</h1>
@ -12,3 +12,14 @@ title: The Best Eleventy Demo TM
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
<h1>Neueste Modelle:</h1>
<ul class="list-disc list-inside">
{% for post in collections.model %}
<li>
<a href="{{ post.url }}">
{{ post.data.title }}</a>
</li>
{% endfor %}
</ul>

8
src/models/models.json Normal file
View file

@ -0,0 +1,8 @@
{
"layout": "modelviewer.njk",
"title": "Unbenannt",
"tags": "model",
"author": "Luca Junge",
"date": "Created",
"modelurl": "model.glb"
}

13
src/models/toy-duck/index.md Normal file
View file

@ -0,0 +1,13 @@
---
title: Toy Duck
alt: A toy duck
file: model.glb
---
<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">
<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">
<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">
<div class="HotspotAnnotation">The Tail</div>
</button>

BIN
src/models/toy-duck/model.glb Normal file
View file

Binary file not shown.

7
src/posts/configuring-eleventy/index.md
View file

@ -2,9 +2,6 @@
title: Configuring Eleventy title: Configuring Eleventy
--- ---
# Configuring Eleventy # What is Eleventy
This is an image Dieser Blog ist mit [Eleventy](https://11ty.dev) gebaut, einem Generator für statische Webseiten.
<div class="text-red-200">heh</div>
![Image](image.png)

3
src/posts/posts.json
View file

@ -2,5 +2,6 @@
"layout": "post.njk", "layout": "post.njk",
"title": "Unbenannt", "title": "Unbenannt",
"tags": "post", "tags": "post",
"author": "Luca Junge" "author": "Luca Junge",
"date": "Created"
} }