Three.js: Blender-Export

17. Dezember 2016 Ralf Dreiundzwanzig Blender Schlagwörter: Blender, Blender Tutorial, Three.js 0 Kommentare

Wer mit WebGL und der Three.js-Engine experimentieren möchte, kann sich diverser Tutorials bedienen. Ich empfehle euch in diesem r23Artikel ein Videotutorial der Fachhochschule Köln vom Studiengang der Medieninformatik.

Das Erstellen von 3D-Szenen in Three.js stellt noch eine gewisse Hürde da, denn 3D-Objekte müssen in JavaScript erzeugt und animiert werden. 3D-Anwendungen wie Blender schaffen Abhilfe, denn hierfür gibt es bereits einen Three.js-Exporter, mit dem sich Szenen als JSON-Objekt exportieren lassen. Darin können auch Animationen enthalten sein.

Exportiert Three.js ASCII JSON-Format.

Empfohlene Blenderversion **> = 2.73.0 **

Kopiere den Ordner three.js/utils/exporters/blender/addons/io_three in den Ordner „scripts / addons“. Der vollständige Pfad ist OS-abhängig (siehe unten).

Windows

Sollte so aussehen:

C: \ Program Files \ Blender Foundation \ Blender \ 2.7X \ scripts \ addons

OSX

In der Benutzerbibliothek für benutzerdefinierte Blender-Addons:

/ Benutzer / (myuser) / Bibliothek / Anwendungsunterstützung / Blender / 2.7X / scripts / addons

Linux

Standardmäßig sollte dies wie folgt aussehen:

/home/USERNAME/.config/blender/2.6X/scripts/addons

Für Benutzer von Ubuntu, die Blender 2.68 über apt-get installiert haben, ist dies der Speicherort:

/ Usr / lib / blender / scripts / addons verwenden

Danach müssen wir das Plugin aktivieren. Öffne Blender-Benutzereinstellungen, suche nach Addons, suche nach three, aktiviere das Kontrollkästchen neben dem Eintrag“ Import-Export: Three.js Format „.

Aktiviere das Import-Export-Addon unter „User Preferences“> „Addons“ und dann verwende das reguläre Export-Menü in Blender, wähle Three.js (json).

Die Einstellung für den Export des 3d-Models im JSON Format.

Aktivieren von msgpack

Um die msgpack-Komprimierung zu aktivieren, kopiere den Ordner three.js/utils/exporters/blender/modules/msgpack in den Ordner „scripts / modules“.

Importeur

Derzeit ist keine Importfunktion verfügbar.

Videotutorial – Der Einstieg in WebGL mit dem Framework three.js

Dieses Videotutorial ist enstanden im Rahmen des Moduls Netzbasierte Anwendungen an der Fachhochschule Köln im Studiengang der Medieninformatik. Kapitelübersicht:
1. Was ist WebGL?
2. Welche Browser unterstützen WebGL?
3. Das Javascript Framework three.js für WebGL
4. 3D-Grundgerüst aufbauen mit three.js
5. Laden und anzeigen eines Collada 3D-Modells mit three.js
6. Animation des 3D-Modells mit three.js
7. Weitere Quellen rund um das Thema WebGL

Videotutorial – Der Einstieg in WebGL mit dem Framework three.js