3D Public Preview Initial Test

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>