2D-Editor for creating 3D-HTML sites - only visible with the 3D-Inspector from Firefox Developer Tools - not maintained anymore
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
db
docs
img
js
.gitattributes
.gitignore
3div.js
3div_formular.html
favicon.ico
index.php
readme.md
schnittstelle.php
test.php

readme.md

3Div

not maintained anymore

Das Projekt wird nicht mehr weiterentwickelt, da u. a. Firefox das 3D-Untersuchungtstool aus dem Standard-Toolset entfernt hat und ich außerdem andere Projekte im Kopf habe.


Demo

Idee

3Div ist ein 2D-Editor für die 3D-Untersuchung von Firefox, bzw. das leider nicht mehr weiterentwickelte Firefox-Addon Tilt.

Die Idee dahinter ist, auf spielerische Weise Quellcodes zu erkunden und gleichzeitig 3D-Modelle zu erstellen. Das Script selbst dient dabei als Basis um in verschiedene Richtungen damit weiter arbeiten zu können, z. B.:

  • Mozilla X-Ray-Goggles -> Inhalte der HTML-Elemente verändern
  • Benutzung der Firefox-Entwickler-Tools
  • Inhalte und Styles bearbeiten
  • Javascript-Konsole
  • Export für Blender
  • animierte Gifs aus Screenshots der 3D-Animation erstellen
  • Screenshots machen, arrangieren, kurzer Exkurs 72dpi/300dpi
    • ausdrucken - etwas in der Hand haben für zu Hause
    • Seite einrichten --> Hintergrund drucken

Die Anleitung ist in den Docs-Ordner verschoben.

Installation

Zip-Archiv herunterladen, entpacken und auf eigenem Server hochladen.

Kommandozeile:

cd ~/html
git clone https://github.com/raffaelj/3div.git

anschließend eigene-domain.de/3div aufrufen

To Do

3Div ist mein erstes Javascript-Projekt, weshalb die Entwicklung nur langsam vorangeht und noch einige Fehler zu beheben, Sicherheitslücken zu schließen und Features hinzuzufügen sind.

  • selektierte Elemente kopieren Strg + C und Strg + V
  • Rückgängig Strg + Z
  • Direkteingabe um Objekt zu ändern --> bis jetzt Firefox-Entwickler-Tools
  • verwendete Farben speichern/auslesen und wiederverwenden --> bis jetzt Firefox-Entwickler-Tools-ColorPicker + externe Hex2Dec-Umrechnung
  • Autosave
  • Präsentations-Galerie
  • grobe Dokumentation
  • ausführliche Dokumentation
  • Option: Bilder einfügen
  • Option: Text einfügen --> bis jetzt umständlich über FF-Entwickler-Tools (kopierten Text als Kindelement einfügen)
  • Nutzerverwaltung
  • Objekt löschen
  • Kreisfunktion
  • Wendelfunktion
  • Kugelfunktion
  • Felder-erzeugen-Funktion (z. B. 100px * 100px geteilt in 10 * 10 Blöcke)
  • resizable --> Developer-Tools --> width und height anpassen
  • Quellcode serverseitig ausgeben, sodass er mit Strg+U sichtbar ist --> Reload nötig
  • Tastaturkürzel
  • benutzerdefiniertes CSS hinzufügen
  • Node-Reihenfolge ändern --> "oben"/Überlagerung auf selber Ebene --> z-index
  • Layer-Ebene am Ende --> "oben"/Überlagerung auf verschiedenen Ebenen --> z-index
  • Autoload Demo-Datei
  • Warnung beim Verlassen der seite --> nervt aber während Entwicklung...
  • Raster-Icon als reines CSS-Icon --> momentan noch in 3D-Ansicht sichtbar
  • Formular in Javascript auslagern
  • jQuery gegen reines Javascript ersetzen
  • auf Github veröffentlichen
  • Lizenz --> auf jeden Fall Open Source und freie Nutzung, aber welche der zig möglichen Lizenzen...?
  • Modul: Gif-Animationen erstellen
  • Modul: Basics HTML und CSS
  • Impressum
  • Datenschutz-Hinweise
  • Hausordnung -> nichts illegales veröffentlichen, kein Mobbing etc.
  • evtl. Objekte rotieren mit CSS-Transform --> ist aber in 3D-Ansicht nicht gedreht
  • Link generieren um Entwurf teilen zu können (ähnlich wie bei Mozilla Webmaker: Thimble, X-Ray-Goggles)
  • Sammlung mit Internetseiten, die spannend in 3D aussehen
  • WebGl direkt auf Seite anstatt mit Plugin, da seit FF47 die integrierte 3D-Untersuchung abgeschafft wurde

Autor des 3Div-Scripts: Raffael Jesche Quellcode: 3Div