Loading

meshspin.js

Meshspin.js ist eine einfache JavaScript Bibliothek, die es erlaubt Drahtgeflechte von 3D Objekten im Browser zu rendern. Meshspin.js basiert auf SVG und JavaScript und benötigt keine anderen JavaScript Frameworks.

English Version

Wie meshspin.js entstand

Wir haben meshspin.js vor etwas einem halben Jahr entwickelt, um unsere Webseite grafisch aufzuwerten. Seither haben mich viele Freunde und Bekannte, vor Allem aber meine Applikationsentwickler-Studenten gefragt, wie der 3D Effekt auf unserer Webseite funktioniert und wie sie einen ähnlichen Effekt in ihre Webprojekte einbauen können.

Wir haben uns schliesslich dazu entschieden, den Code von Meshspin.js Open Source und lizenzfrei zu veröffentlichen. Heute habe ich endlich die Zeit gefunden, den Code aufzuräumen und das Repository auf GitHub hochzuladen.

Wir haben uns grösste Mühe gegeben, meshspin.js so einfach und benutzerfreundlich wie möglich zu machen. Wenn Dir meshspin.js gefällt, gib uns einen Stern auf GitHub oder teile einen Link zu dieser Webseite.

Get started

Um meshspin.js verwenden zu können, klone entweder das meshspin.js Repository von GitHub oder binde meshspin.min.js direkt über kickstart.ch ein.

HTML Grundstruktur

<!doctype html> <body> <div id="wrapper"></div> <script src="https://kickstart.ch/js/meshspin.min.js"></script> <script> var mesh = new MeshSpin(); mesh.setup('wrapper'); mesh.run(); </script> </body>

Dieses kurze Codeschnipsel rendert das Drahtgeflecht eines dehenden Tetraeder in deinem Browser. Standardmässig ist die Farbe der Linien auf die SVG Farbe currentColor gesetzt, welche Du ganz einfach mit CSS ansteuern kannst.

Objekt Definition

Um ein eigenes 3D Objekt zu rendern, musst Du der Funktion figure() deine Objektdefinition mitgeben. Als Beispiel rendern wir einen Würfel.

Jede Figur besteht aus Punkten und Kanten. Ein Würfel hat 8 Punkte und 12 Kanten. Das Array .nodes beinhaltet alle [x,y,z] Koordinaten im 3-dimensionalen Raum. Um eine Kante zu zeichnen, musst Du einfach die entsprechenden Punkte zum Array .edges hinzufügen.

Bespiel eines drehenden Würfels

var cube = { nodes: [ {x:1, y: 1, z: -1}, {x:1, y: -1, z: -1}, {x:-1, y: -1, z: -1}, {x:-1, y: 1, z: -1}, {x:1, y: 1, z: 1}, {x:1, y: -1, z: 1}, {x:-1, y: -1, z: 1}, {x:-1, y: 1, z: 1}, ], edges: [[0,1], [0,3], [0,4], [0,2], [1,3], [1,5], [1,2], [2,3], [2,6], [3,7], [4,5], [4,7], [5,6], [6,7]], }; var mesh = new MeshSpin(); mesh.figure(cube); mesh.setup('wrapper'); mesh.run();

Meshspin.js dreht das Objekt immer um den Ursprungspunkt [0,0,0]. Stelle deshalb sicher, dass Du die Ecken deines Objektes um den Ursprung herum verteilst.

SVG ViewBox und Skalierungsfaktor

Die standard SVG ViewBox von meshspin.js ist [-100, -100, 200, 200]. Das heisst, die X- und Y-Achsen beginnen bei -100 und erstecken sich über 200 bis hin zu 100. Mit dem Aufruf der Funktion figure() werden die Koordinaten standardmässig mit einem Saklierungsfaktor gestreckt. Falls nötig, kannst Du diese beiden Parameter über die Variablen .viewBox und .scaleFactor selber steuern.

mesh.viewBox = [-10, -10, 20, 20]; mesh.scaleFactor = 5;

3D aktivieren und Hintergrundfarbe setzen

Im nächsten Beispiel aktivieren wir 3D, um die Linien auf der Rückseite des Objektes zu entfernen. Zudem geben wir dem Objekt eine Füllfarbe.

mesh.fake3D = true; mesh.background = true; mesh.fillColor = '#def';

Der Ausdruck .fake3D deutet an, dass keine vollwertige 3D Berechnung stattfindet, um die sichtbare Seite darzustellen. Stattdessen werden die sichtbaren Seiten mit einem kleinen Trick berechnet, der für alle konvexen Objekte funktionieren sollte.

Initiale Drehung und Rotation steuern

Mit der funktion rotate() kannt Du die initiale Orientierung deines Objektes festlegen. Über .staticRotation legst Du für alle 3 Achsen fest, wie das Objekt in jedem Frame gedreht werden soll. Die Drehung erfolgt in Radianten - 2 × PI ist also eine ganze Umdrehung.

mesh.rotate({x: 0, y: Math.PI/4, z: 0 }); mesh.staticRotation = {x: -0.01, y: 0, z: 0.01};

Mausbewegung einfangen

Meshspin.js besitzt ein vorgefertigtes Callback, welches die Drehung des Objektes anhand der Mausbewegung steuern kann. Zu diesem Zweck musst Du einfach das Callback .getRotationOffset mit rotateByMouse übersteuern.

mesh.getRotationOffset = mesh.rotateByMouse;

Eigene Rotationsfunktion definieren

Alternativ kannst Du deine eigene Rotationsfunktions definieren. Zu diesem Zweck musst Du einfach die Funktion .getRotationOffset überschreiben. GetRotationOffset wird vor jedem Frame aufgerufen und gibt die Drehungen aller 3 Achsen zurück.

mesh.getRotationOffset = function() { ... return { x:..., y:..., z:... } };

Debugging

Insbesondere wenn Du eine eigene Figur entwirfst, kann es sehr hilfreich sein .debug zu aktivieren.

var phi = (1 + Math.sqrt(5)) / 2; var dodecahedron = {} dodecahedron.nodes = [ {x:1, y: 1, z: 1}, {x:1, y: 1, z: -1}, {x:1, y: -1, z: 1}, {x:1, y: -1, z: -1}, {x:-1, y: 1, z: 1}, {x:-1, y: 1, z: -1}, {x:-1, y: -1, z: 1}, {x:-1, y: -1, z: -1}, {x:0, y: phi, z: 1/phi}, {x:0, y: phi, z: -1/phi}, {x:0, y: -phi, z: 1/phi}, {x:0, y: -phi, z: -1/phi}, {x:1/phi, y: 0, z: phi}, {x:1/phi, y: 0, z: -phi}, {x:-1/phi, y: 0, z: phi}, {x:-1/phi, y: 0, z: -phi}, {x:phi, y: 1/phi, z: 0}, {x:phi, y: -1/phi, z: 0}, {x:-phi, y: 1/phi, z: 0}, {x:-phi, y: -1/phi, z: 0}, ]; dodecahedron.edges = [[0,16], [0,8], [0,12], [1,9], [1,13], [1,16], [2,10], [2,12], [2,17], [3,11], [3,13], [3,17], [4,8], [4,14], [4,18], [5,9], [5,15], [5,18], [6,10], [6,14], [6,19], [7,11], [7,15], [7,19], [8,9], [10,11], [12,14], [13,15], [16,17], [18,19]]; var mesh6 = new MeshSpin(); mesh6.figure(dodecahedron); mesh6.fake3D = true; mesh6.debug = true; mesh6.getRotationOffset = mesh5.rotateByMouse; mesh6.setup('wrapper'); mesh6.run();

Kommentare und Bugreports

Wenn Du Fragen oder Kommentare hast, hinterlasse bitte eine Nachricht. Bugs bitte auf GitHub melden.