Peter Asmus

WebGL 3D Model Viewer Three.js

Im letzten Beitrag habe ich gezeigt wie mit Three.js ein 3D Model Viewer für WebGL programmiert wird. Dieser zeigt ein sich drehendes Model s.h. Beispiel. Jetzt machen wir diesen 3D Viewer interaktiv, in diesem Viewer können wir das Model mit der Maus drehen , skalieren und mit der rechten Maustaste verschieben. Ein Beispiel für die Steuerung mit der Maus ist auch im example Ordner s.h. Trackballcontrols enthalten, diese Steuerung benutze ich für den 3d Viewer. Nach […]

3D Viewer erstellen mit Three.js

Für den 3D Viewer mit Three.js benötigt man eine HTML Editor sowie das Library three.min.js auf dem Server. Erstelle eine neue HTML-Datei <!doctype html> <html> <head> <meta charset=“utf-8″ /> <title>WebGL Model Viewer Demo</title> </head> <body> </body> </html> Im Body Bereich laden wir Three.js mit <script src=“../build/three.min.js“></script> Wir definieren den Bereich in dem unser 3D Modell angezeigt werden soll mit <div id=“container“></div> Mit dem Befehl Script starten wir die Szene und definieren alle Variablen <script> var camera, […]

3D Modell erstellen mit Blender

Blender ist das freie 3D-Modellierungs- und Animationsprogramm dieses Programm hat auf den WebGL Standard gewartet. Zu Blender gibt es sehr viele und gut Tutorials (Anleitungen), auf meiner Linkseite findet ihre einige interessante Links dazu. Ich möchte nur an Hand von Beispielen zeigen was bei der Erstellung für ein WebGL Modell zu beachten ist. Im Archiv von Three.js ist ein Verzeichnis Blender Exportscript. Mit diesem Script habe ich die Badeente exportiert s.h. Artikel Three.js WYSIWYG-Editor . In diesen Videos […]

Three.js WYSIWYG-Editor

Im Download Archiv von Three.js ist auch ein WYSIWYG-Editor enthalten. Dieser WYSIWYG-Editor eignet sich sehr gut eigene 3D Modelle in Szene zu setzten, ohne Programmkenntnnise. 3D Modelle erstellt man mit Blender. Dies ist ein freies 3D-Modellierungs- und Animationsprogramm. Mit dem Exportscript von Three.js für Blender werden die 3D Modelle im Json(.js) Format exportiert. Ich habe eine Badeente als Beispiel erstellt. Das File downloaden und auf dem Desktop speichern, den Editor starten. Mit Drag and Drop das […]

Three.js Framework

Three.js ist eine Library (Programmbibliothek) oder ein Framework (Programmiergerüst) in Javascript für die Darstellung von 3D Szenen im WebGL Standard. Benötigt wird ein Server mit FTP Zugang und einer Domain. Die aktuelle Version steht auf  Threejs.org zur Verfügung. Auf den Server werden die Verzeichnisse examples und build übertragen, alle Beispiele (ca. 120 MB) müssten jetzt auch auf deinem Server laufen. Die Beispiele sind auch die beste Grundlage für eigene Projekte. Grundkenntnis in Programmierung von HTML und […]

Nächste Seite »