{"id":148,"date":"2024-12-19T08:28:28","date_gmt":"2024-12-19T08:28:28","guid":{"rendered":"https:\/\/bastelgarage.ch\/blog\/?p=148"},"modified":"2024-12-19T08:40:58","modified_gmt":"2024-12-19T08:40:58","slug":"multiboard-io-mein-platten-generator","status":"publish","type":"post","link":"https:\/\/bastelgarage.ch\/blog\/multiboard-io-mein-platten-generator\/","title":{"rendered":"Multiboard.io \u2013 mein Platten generator"},"content":{"rendered":"\n<p>Willkommen! In diesem Beitrag zeige ich dir, wie ich einen Online-Generator entwickelt habe, der speziell f\u00fcr die Erstellung von individuellen Endst\u00fccken f\u00fcr den Multiboard Planner entwickelt wurde. Damit k\u00f6nnen Nutzer einfach Teile generieren, die nicht den Standardgr\u00f6\u00dfen entsprechen, ohne auf externe Software wie Blender angewiesen zu sein. Hinter dem modernen und flexiblen Interface steckt eine Menge technischer Innovation und Programmierarbeit. In diesem Blogbeitrag nehme ich dich mit hinter die Kulissen und erkl\u00e4re, wie ich die Programmierung f\u00fcr unser Multiboard-System aufgebaut habe, inklusive des Online-Konfigurators, den du <a href=\"https:\/\/octaflex.ch\/planner\/generator.html?X=8&amp;Y=8&amp;top=0&amp;right=0\" target=\"_blank\" rel=\"noreferrer noopener\">hier <\/a>ausprobieren kannst.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Was ist Multiboard.io?<\/h4>\n\n\n\n<p>Multiboard.io ist eine Plattform, die mit dem Multiboard Planner ein leistungsstarkes Tool f\u00fcr die Planung modularer Boards bereitstellt. Der Planner bietet eine Vielzahl von Standardmodulteilen, die flexibel angepasst werden k\u00f6nnen. Mein Beitrag dazu ist die Entwicklung eines Generators, der es erm\u00f6glicht, spezielle Endst\u00fccke wie 8&#215;4 oder Eckteile direkt online zu erstellen. Ich habe den Generator entwickelt, der Teil des Systems ist und die Erstellung von 8&#215;4 gro\u00dfen Teilen oder Eckst\u00fccken erm\u00f6glicht. Ein Problem, das Nutzer bisher hatten, war die Einschr\u00e4nkung auf Standardgr\u00f6\u00dfen. Um individuelle Ma\u00dfe oder spezielle Teile wie Eckst\u00fccke zu verwenden, mussten diese bisher m\u00fchsam mit Software wie Blender erstellt werden. Der Multiboard Planner ist ein zentrales Tool von Multiboard.io, mit dem Nutzer ihre modularen Boards planen k\u00f6nnen. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"577\" src=\"https:\/\/bastelgarage.ch\/blog\/wp-content\/uploads\/2024\/12\/Multiboard_planner-1024x577.png\" alt=\"\" class=\"wp-image-150\" srcset=\"https:\/\/bastelgarage.ch\/blog\/wp-content\/uploads\/2024\/12\/Multiboard_planner-1024x577.png 1024w, https:\/\/bastelgarage.ch\/blog\/wp-content\/uploads\/2024\/12\/Multiboard_planner-300x169.png 300w, https:\/\/bastelgarage.ch\/blog\/wp-content\/uploads\/2024\/12\/Multiboard_planner-768x432.png 768w, https:\/\/bastelgarage.ch\/blog\/wp-content\/uploads\/2024\/12\/Multiboard_planner-1536x865.png 1536w, https:\/\/bastelgarage.ch\/blog\/wp-content\/uploads\/2024\/12\/Multiboard_planner.png 1602w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.multiboard.io\/planner\">https:\/\/www.multiboard.io\/planner<\/a><\/p>\n\n\n\n<p>Mein 3D STL Generator erweitert dieses Tool, indem er die einfache Erstellung von Endst\u00fccken und speziellen Modulen erm\u00f6glicht.<\/p>\n\n\n\n<p>Ein Beispiel: Du kannst direkt <a href=\"https:\/\/octaflex.ch\/planner\/generator.html?X=8&amp;Y=8&amp;top=0&amp;right=0\" target=\"_blank\" rel=\"noreferrer noopener\">hier<\/a> ein Layout mit 8&#215;8 Feldern ausprobieren. Der URL-Parameter <code>X=8&amp;Y=8<\/code> definiert die Gr\u00f6\u00dfe des Boards, w\u00e4hrend <code>top=0<\/code> und <code>right=0<\/code> Optionen f\u00fcr die Rahmenkonfiguration festlegen. <strong>Du kannst mit der Maus die Grafik 3D drehen. <\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"744\" height=\"370\" src=\"https:\/\/bastelgarage.ch\/blog\/wp-content\/uploads\/2024\/12\/Multiboard3.png\" alt=\"\" class=\"wp-image-151\" srcset=\"https:\/\/bastelgarage.ch\/blog\/wp-content\/uploads\/2024\/12\/Multiboard3.png 744w, https:\/\/bastelgarage.ch\/blog\/wp-content\/uploads\/2024\/12\/Multiboard3-300x149.png 300w\" sizes=\"auto, (max-width: 744px) 100vw, 744px\" \/><\/figure>\n\n\n\n<p>Die Funktionalit\u00e4t basiert ausschliesslich auf modernem JavaScript und nutzt Bibliotheken wie Three.js f\u00fcr die 3D-Darstellung. Konkret werden folgende Module verwendet:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Three.js<\/strong>: F\u00fcr die Erstellung und Darstellung der 3D-Modelle.<\/li>\n\n\n\n<li><strong>OBJLoader<\/strong>: Zum Laden von OBJ-Dateien direkt in den Browser.<\/li>\n\n\n\n<li><strong>OrbitControls<\/strong>: Um die Kamerasteuerung und Navigation im 3D-Raum zu erm\u00f6glichen.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Details zur Implementierung<\/h4>\n\n\n\n<p>Die Funktion <code>generatePlate(holesY, holesZ, top, right)<\/code> ist das Kernst\u00fcck meines Generators. Sie erm\u00f6glicht es, modulare Platten mit den gew\u00fcnschten Dimensionen und speziellen Rahmenoptionen zu erstellen. Hier ist, wie die Funktion aufgebaut ist:<\/p>\n\n\n\n<p><strong>Modelle laden:<\/strong> Die Funktion verwendet den <code>OBJLoader<\/code> von Three.js, um 3D-Modelle von Core- und Hexa-Tiles zu laden.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const coreModelPath = 'https:\/\/octaflex.ch\/planner\/models\/1x1_Core.obj';\nconst hexaModelPath = 'https:\/\/octaflex.ch\/planner\/models\/1x1_Hexa.obj';\nloader.load(coreModelPath, (coreObject) =&gt; { ... });<\/code><\/pre>\n\n\n\n<p><strong>Modulplatzierung:<\/strong> Mit verschachtelten Schleifen werden die Module basierend auf den Parametern <code>holesY<\/code> und <code>holesZ<\/code> in einem Raster positioniert. Besondere Logik sorgt daf\u00fcr, dass bei Bedarf Hexa- oder Core-Tiles verwendet werden.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>for (let y = 0; y &lt; holesY; y++) {\n  for (let z = 0; z &lt; holesZ; z++) {\n    let tile = (top &amp;&amp; y === holesY - 1) ? hexaObject.clone() : coreObject.clone();\n    tile.position.set(0, y * tileSize, z * tileSize);\n    plate.add(tile);\n  }\n}<\/code><\/pre>\n\n\n\n<p><strong>Materialanpassungen:<\/strong> Die Modelle werden mit neuen Farben versehen, um ihre Funktion zu kennzeichnen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>coreObject.traverse((child) =&gt; {\n  if (child.isMesh) {\n    child.material = new THREE.MeshStandardMaterial({ color: 0x56C1FF });\n  }\n});<\/code><\/pre>\n\n\n\n<p><strong>Plattenstruktur:<\/strong> Die generierte Platte wird als <code>THREE.Group<\/code> organisiert und in der Szene hinzugef\u00fcgt:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>scene.add(plate);<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Debugging und Performance:<\/strong> Konsolenausgaben helfen bei der Fehlerbehebung, w\u00e4hrend die Kamera automatisch angepasst wird, um die generierte Platte im Fokus zu halten.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Herausforderungen bei der Entwicklung<\/h4>\n\n\n\n<p>Die gr\u00f6\u00dften Herausforderungen bei der Entwicklung waren:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Performance:<\/strong> Der Konfigurator musste schnell reagieren, auch bei komplexen Designs. Dies wurde durch optimiertes JavaScript und serverseitiges Caching gel\u00f6st.<\/li>\n\n\n\n<li><strong>Flexibilit\u00e4t:<\/strong> Nutzer m\u00f6chten oft individuelle Anpassungen. Deshalb habe ich eine dynamische Schnittstelle geschaffen, die verschiedene Optionen erm\u00f6glicht, ohne die Benutzerfreundlichkeit zu beeintr\u00e4chtigen.<\/li>\n\n\n\n<li><strong>Kompatibilit\u00e4t:<\/strong> Um sicherzustellen, dass der Konfigurator auf allen Ger\u00e4ten reibungslos funktioniert, habe ich responsive Designs und Cross-Browser-Tests implementiert.<\/li>\n<\/ul>\n\n\n\n<p>Hast du Fragen oder Anregungen? Hinterlasse uns gerne einen Kommentar \u2013 ich freue mich \u00fcber Feedback!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Willkommen! In diesem Beitrag zeige ich dir, wie ich einen Online-Generator entwickelt habe, der speziell f\u00fcr die Erstellung von individuellen Endst\u00fccken f\u00fcr den Multiboard Planner entwickelt wurde. Damit k\u00f6nnen Nutzer einfach Teile generieren, die nicht den Standardgr\u00f6\u00dfen entsprechen, ohne auf externe Software wie Blender angewiesen zu sein. Hinter dem modernen und flexiblen Interface steckt eine &#8230; <a title=\"Multiboard.io \u2013 mein Platten generator\" class=\"read-more\" href=\"https:\/\/bastelgarage.ch\/blog\/multiboard-io-mein-platten-generator\/\" aria-label=\"Mehr Informationen \u00fcber Multiboard.io \u2013 mein Platten generator\">Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":149,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-148","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wissen"],"_links":{"self":[{"href":"https:\/\/bastelgarage.ch\/blog\/wp-json\/wp\/v2\/posts\/148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bastelgarage.ch\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bastelgarage.ch\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bastelgarage.ch\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bastelgarage.ch\/blog\/wp-json\/wp\/v2\/comments?post=148"}],"version-history":[{"count":6,"href":"https:\/\/bastelgarage.ch\/blog\/wp-json\/wp\/v2\/posts\/148\/revisions"}],"predecessor-version":[{"id":158,"href":"https:\/\/bastelgarage.ch\/blog\/wp-json\/wp\/v2\/posts\/148\/revisions\/158"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bastelgarage.ch\/blog\/wp-json\/wp\/v2\/media\/149"}],"wp:attachment":[{"href":"https:\/\/bastelgarage.ch\/blog\/wp-json\/wp\/v2\/media?parent=148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bastelgarage.ch\/blog\/wp-json\/wp\/v2\/categories?post=148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bastelgarage.ch\/blog\/wp-json\/wp\/v2\/tags?post=148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}