Willkommen! In diesem Beitrag zeige ich dir, wie ich einen Online-Generator entwickelt habe, der speziell für die Erstellung von individuellen Endstücken für den Multiboard Planner entwickelt wurde. Damit können Nutzer einfach Teile generieren, die nicht den Standardgrößen 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äre, wie ich die Programmierung für unser Multiboard-System aufgebaut habe, inklusive des Online-Konfigurators, den du hier ausprobieren kannst.
Was ist Multiboard.io?
Multiboard.io ist eine Plattform, die mit dem Multiboard Planner ein leistungsstarkes Tool für die Planung modularer Boards bereitstellt. Der Planner bietet eine Vielzahl von Standardmodulteilen, die flexibel angepasst werden können. Mein Beitrag dazu ist die Entwicklung eines Generators, der es ermöglicht, spezielle Endstücke wie 8×4 oder Eckteile direkt online zu erstellen. Ich habe den Generator entwickelt, der Teil des Systems ist und die Erstellung von 8×4 großen Teilen oder Eckstücken ermöglicht. Ein Problem, das Nutzer bisher hatten, war die Einschränkung auf Standardgrößen. Um individuelle Maße oder spezielle Teile wie Eckstücke zu verwenden, mussten diese bisher mühsam mit Software wie Blender erstellt werden. Der Multiboard Planner ist ein zentrales Tool von Multiboard.io, mit dem Nutzer ihre modularen Boards planen können.

https://www.multiboard.io/planner
Mein 3D STL Generator erweitert dieses Tool, indem er die einfache Erstellung von Endstücken und speziellen Modulen ermöglicht.
Ein Beispiel: Du kannst direkt hier ein Layout mit 8×8 Feldern ausprobieren. Der URL-Parameter X=8&Y=8
definiert die Größe des Boards, während top=0
und right=0
Optionen für die Rahmenkonfiguration festlegen. Du kannst mit der Maus die Grafik 3D drehen.

Die Funktionalität basiert ausschliesslich auf modernem JavaScript und nutzt Bibliotheken wie Three.js für die 3D-Darstellung. Konkret werden folgende Module verwendet:
- Three.js: Für die Erstellung und Darstellung der 3D-Modelle.
- OBJLoader: Zum Laden von OBJ-Dateien direkt in den Browser.
- OrbitControls: Um die Kamerasteuerung und Navigation im 3D-Raum zu ermöglichen.
Details zur Implementierung
Die Funktion generatePlate(holesY, holesZ, top, right)
ist das Kernstück meines Generators. Sie ermöglicht es, modulare Platten mit den gewünschten Dimensionen und speziellen Rahmenoptionen zu erstellen. Hier ist, wie die Funktion aufgebaut ist:
Modelle laden: Die Funktion verwendet den OBJLoader
von Three.js, um 3D-Modelle von Core- und Hexa-Tiles zu laden.
const coreModelPath = 'https://octaflex.ch/planner/models/1x1_Core.obj';
const hexaModelPath = 'https://octaflex.ch/planner/models/1x1_Hexa.obj';
loader.load(coreModelPath, (coreObject) => { ... });
Modulplatzierung: Mit verschachtelten Schleifen werden die Module basierend auf den Parametern holesY
und holesZ
in einem Raster positioniert. Besondere Logik sorgt dafür, dass bei Bedarf Hexa- oder Core-Tiles verwendet werden.
for (let y = 0; y < holesY; y++) {
for (let z = 0; z < holesZ; z++) {
let tile = (top && y === holesY - 1) ? hexaObject.clone() : coreObject.clone();
tile.position.set(0, y * tileSize, z * tileSize);
plate.add(tile);
}
}
Materialanpassungen: Die Modelle werden mit neuen Farben versehen, um ihre Funktion zu kennzeichnen:
coreObject.traverse((child) => {
if (child.isMesh) {
child.material = new THREE.MeshStandardMaterial({ color: 0x56C1FF });
}
});
Plattenstruktur: Die generierte Platte wird als THREE.Group
organisiert und in der Szene hinzugefügt:
scene.add(plate);
- Debugging und Performance: Konsolenausgaben helfen bei der Fehlerbehebung, während die Kamera automatisch angepasst wird, um die generierte Platte im Fokus zu halten.
Herausforderungen bei der Entwicklung
Die größten Herausforderungen bei der Entwicklung waren:
- Performance: Der Konfigurator musste schnell reagieren, auch bei komplexen Designs. Dies wurde durch optimiertes JavaScript und serverseitiges Caching gelöst.
- Flexibilität: Nutzer möchten oft individuelle Anpassungen. Deshalb habe ich eine dynamische Schnittstelle geschaffen, die verschiedene Optionen ermöglicht, ohne die Benutzerfreundlichkeit zu beeinträchtigen.
- Kompatibilität: Um sicherzustellen, dass der Konfigurator auf allen Geräten reibungslos funktioniert, habe ich responsive Designs und Cross-Browser-Tests implementiert.
Hast du Fragen oder Anregungen? Hinterlasse uns gerne einen Kommentar – ich freue mich über Feedback!