3D Public Preview Initial Test

package.json

@@ -22,6 +22,7 @@
 		"@astropub/icons": "^0.2.0",
 		"@types/color": "^3.0.6",
 		"@types/node": "^20.11.20",
+		"@types/three": "^0.162.0",
 		"@typescript-eslint/eslint-plugin": "^6.21.0",
 		"@typescript-eslint/parser": "^6.21.0",
 		"autoprefixer": "^10.4.17",
@@ -36,6 +37,7 @@
 		"svelte": "^4.2.12",
 		"tailwind-merge": "^2.2.1",
 		"tailwindcss": "^3.4.1",
+		"three": "^0.162.0",
 		"typescript": "^5.3.3"
 	},
 	"dependencies": {

pnpm-lock.yaml

@@ -91,6 +91,9 @@ devDependencies:
   '@types/node':
     specifier: ^20.11.20
     version: 20.11.20
+  '@types/three':
+    specifier: ^0.162.0
+    version: 0.162.0
   '@typescript-eslint/eslint-plugin':
     specifier: ^6.21.0
     version: 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.3.3)
@@ -133,6 +136,9 @@ devDependencies:
   tailwindcss:
     specifier: ^3.4.1
     version: 3.4.1
+  three:
+    specifier: ^0.162.0
+    version: 0.162.0
   typescript:
     specifier: ^5.3.3
     version: 5.3.3
@@ -1154,6 +1160,10 @@ packages:
     engines: {node: '>=10.13.0'}
     dev: true
 
+  /@tweenjs/tween.js@23.1.1:
+    resolution: {integrity: sha512-ZpboH7pCPPeyBWKf8c7TJswtCEQObFo3bOBYalm99NzZarATALYCo5OhbCa/n4RQyJyHfhkdx+hNrdL5ByFYDw==}
+    dev: true
+
   /@types/acorn@4.0.6:
     resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==}
     dependencies:
@@ -1270,18 +1280,36 @@ packages:
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
     dev: true
 
+  /@types/stats.js@0.17.3:
+    resolution: {integrity: sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==}
+    dev: true
+
   /@types/tern@0.23.9:
     resolution: {integrity: sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==}
     dependencies:
       '@types/estree': 1.0.5
     dev: false
 
+  /@types/three@0.162.0:
+    resolution: {integrity: sha512-0j5yZcVukVIhrhSIC7+LmBPkkMoMuEJ1AfYBZfgNytdYqYREMuiyXWhYOMeZLBElTEAlJIZn7r2W3vqTIgjWlg==}
+    dependencies:
+      '@tweenjs/tween.js': 23.1.1
+      '@types/stats.js': 0.17.3
+      '@types/webxr': 0.5.14
+      fflate: 0.6.10
+      meshoptimizer: 0.18.1
+    dev: true
+
   /@types/unist@2.0.10:
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
 
   /@types/unist@3.0.2:
     resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
 
+  /@types/webxr@0.5.14:
+    resolution: {integrity: sha512-UEMMm/Xn3DtEa+gpzUrOcDj+SJS1tk5YodjwOxcqStNhCfPcwgyC5Srg2ToVKyg2Fhq16Ffpb0UWUQHqoT9AMA==}
+    dev: true
+
   /@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.3.3):
     resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -2970,6 +2998,10 @@ packages:
     dependencies:
       reusify: 1.0.4
 
+  /fflate@0.6.10:
+    resolution: {integrity: sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==}
+    dev: true
+
   /file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -4144,6 +4176,10 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  /meshoptimizer@0.18.1:
+    resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==}
+    dev: true
+
   /micromark-core-commonmark@2.0.0:
     resolution: {integrity: sha512-jThOz/pVmAYUtkroV3D5c1osFXAMv9e0ypGDOIZuCeAe91/sD6BoE2Sjzt30yuXtwOYUmySOhMas/PVyh02itA==}
     dependencies:
@@ -6119,6 +6155,10 @@ packages:
     dependencies:
       any-promise: 1.3.0
 
+  /three@0.162.0:
+    resolution: {integrity: sha512-xfCYj4RnlozReCmUd+XQzj6/5OjDNHBy5nT6rVwrOKGENAvpXe2z1jL+DZYaMu4/9pNsjH/4Os/VvS9IrH7IOQ==}
+    dev: true
+
   /to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}

src/components/3d/PublicPreview.svelte

@@ -0,0 +1,105 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2024 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+    import * as THREE from "three";
+    import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
+    import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+    import {onMount} from "svelte";
+
+    export let file: string;
+    export let fov: number = 60;
+    export let near: number = 1
+    export let far: number = 1000;
+    export let distance: number = 100;
+
+    let loaded = false;
+
+    let div: HTMLDivElement;
+    let scene: THREE.Scene;
+    let camera: THREE.PerspectiveCamera;
+    let renderer: THREE.WebGLRenderer;
+    let controls: OrbitControls;
+    let light: THREE.AmbientLight;
+
+    onMount(() => {
+        scene = new THREE.Scene();
+        scene.background = new THREE.Color(0x171717);
+        camera = new THREE.PerspectiveCamera(fov, 1, near, far);
+
+        renderer = new THREE.WebGLRenderer();
+        renderer.setSize(500, 300);
+        controls = new OrbitControls(camera, renderer.domElement);
+        controls.autoRotate = true;
+        controls.autoRotateSpeed = 1;
+
+        const loader = new GLTFLoader();
+
+        loader.load(`/3d/${file}.glb`, (gltf) => {
+            let s = scene.add(gltf.scene);
+
+            let cube_bbox = new THREE.Box3();
+            cube_bbox.setFromObject(gltf.scene);
+            let center = new THREE.Vector3();
+            cube_bbox.getCenter(center);
+
+            controls.target = center;
+            camera.position.set(0, center.y, distance);
+
+            controls.update();
+        }, undefined, console.log);
+
+        div.append(renderer.domElement);
+
+        light = new THREE.AmbientLight(0xffffff, 1);
+        scene.add(light);
+
+        new ResizeObserver(handleResize).observe(div);
+
+        function animate() {
+            requestAnimationFrame( animate );
+
+            renderer.render( scene, camera );
+            controls.update();
+        }
+
+        animate();
+
+        loaded = true;
+    });
+
+    function handleResize() {
+        let width = div.clientWidth;
+        let height = div.clientHeight;
+
+        camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+
+        renderer.setSize(width, height, true);
+    }
+</script>
+
+<div bind:this={div} class="w-full h-full">
+
+</div>
+
+{#if !loaded}
+    <slot></slot>
+{/if}
+

src/components/Navbar.svelte

@@ -63,6 +63,7 @@
                     <a class="btn btn-gray my-1"
                        href={l("/announcements")}>{t("navbar.links.home.announcements")}</a>
                     <a class="btn btn-gray" href={l("/about")}>{t("navbar.links.home.about")}</a>
+                    <a class="btn btn-gray" href={l("/publics")}>{t("navbar.links.home.publics")}</a>
                     <a class="btn btn-gray" href={l("/downloads")}>{t("navbar.links.home.downloads")}</a>
                     <a class="btn btn-gray" href={l("/faq")}>{t("navbar.links.home.faq")}</a>
                 </div>

src/content/config.ts

@@ -80,6 +80,26 @@ export const announcements = defineCollection({
     }),
 });
 
+export const publics = defineCollection({
+    type: "data",
+    schema: ({image}) => z.object({
+        "name": z.string(),
+        "description": z.string(),
+        "id": z.number().positive(),
+        "creator": z.string().array().optional(),
+        "showcase": z.string().url().optional(),
+        "camera": z.object({
+            "fov": z.number().optional(),
+            "near": z.number().optional(),
+            "far": z.number().optional(),
+            "distance": z.number().optional(),
+        }).optional(),
+        "image": image(),
+        "xray": image().optional(),
+        "gamemode": reference("modes"),
+    }),
+});
+
 export const collections = {
     "pages": pages,
     "help": help,
@@ -87,4 +107,5 @@ export const collections = {
     "rules": rules,
     "downloads": downloads,
     "announcements": announcements,
+    "publics": publics,
 };

src/content/publics/frostbite.json

@@ -0,0 +1,8 @@
+{
+  "name": "Frostbite",
+  "description": "A simple, lightweight description of a frostbite.",
+  "id": 123,
+  "creator": ["Test", "Test2"],
+  "gamemode": "wargear",
+  "image": "../../images/WarGears.png"
+}

src/i18n/common/en.json

@@ -9,6 +9,7 @@
         "title": "Home",
         "announcements": "Announcements",
         "about": "About",
+        "publics": "Publics",
         "downloads": "Downloads",
         "faq": "FAQ"
       },

src/pages/publics/[schem].astro

@@ -0,0 +1,33 @@
+---
+import {createGetStaticPaths} from "astro-i18n";
+import { getCollection, CollectionEntry } from "astro:content";
+import PageLayout from "../../layouts/PageLayout.astro";
+import PublicPreview from "@components/3d/PublicPreview.svelte";
+import { Image } from "astro:assets";
+
+export const getStaticPaths = createGetStaticPaths(async () => {
+    const pages = await getCollection("publics");
+
+    return pages.map((entry) => ({
+        props: {
+            schem: entry,
+        },
+        params: {
+            schem: entry.id,
+        },
+    }));
+});
+
+const { schem }: { schem: CollectionEntry<"publics">} = Astro.props;
+---
+
+<PageLayout title={schem.data.name}>
+    <h1 class="text-5xl font-bold" transition:name={schem.data.name + "-title"}>{schem.data.name}</h1>
+    <PublicPreview client:idle file={schem.id}>
+        <Image transition:name={schem.data.name + "-img"} src={schem.data.image} alt={schem.data.name}></Image>
+    </PublicPreview>
+    <p transition:name={schem.data.name + "-desc"}>{schem.data.description}</p>
+    <p>
+        Erbauer: {schem.data.creator.join(", ")}
+    </p>
+</PageLayout>

src/pages/publics/index.astro

@@ -0,0 +1,25 @@
+---
+import PageLayout from "../../layouts/PageLayout.astro";
+import {getCollection} from "astro:content";
+import {l} from "../../util/util";
+import { Image } from "astro:assets";
+import Card from "@components/Card.svelte";
+
+const publics = await getCollection("publics");
+---
+
+<PageLayout title="Publics">
+    <div>
+        {publics.map((pub) => (
+            <a href={l("/publics/" + pub.id)}>
+                <Card extraClasses="w-full mx-0">
+                    <div class="flex justify-center">
+                        <Image src={pub.data.image} alt={pub.data.name} transition:name={pub.data.name + "-img"} />
+                    </div>
+                    <h2 class="font-bold text-5xl" transition:name={pub.data.name + "-title"}>{pub.data.name}</h2>
+                    <h3 transition:name={pub.data.name + "-desc"}>{pub.data.description}</h3>
+                </Card>
+            </a>
+        ))}
+    </div>
+</PageLayout>

svelte.config.js

@@ -1,5 +1,5 @@
-import { vitePreprocess } from '@astrojs/svelte';
+import { vitePreprocess } from "@astrojs/svelte";
 
 export default {
-	preprocess: vitePreprocess(),
+    preprocess: vitePreprocess(),
 };