Deutsch
PHP, HTML & JavaScript- Forum

3D Grafik - WebGL mit three.js

 

HofK
Auf einen heißen Tipp von IF hin, habe ich mir mal
three.js  [...]  angeschaut. Da  [...]  (ganz unten) die ersten Resultate.
 
31.01.2016  
 




HofK
Weil es da (siehe  [...]  &  [...]  ) momentan nicht weitergeht,
habe ich etwas Zeit gefunden und mal in diesem Bereich nach einem halben Jahr wieder etwas rumgewurstelt. --- ----


Wenn es interessiert:  [...] 

Mit der web Konsole z.B. in Firefox kann man jeweils das ein wenig kommentierte JavaScript ansehen.
 
06.09.2016  
 




RGH
Großartig!

Gruß
Roland
 
XProfan X3
Intel Duo E8400 3,0 GHz / 4 GB RAM / 1000 GB HDD - ATI Radeon HD 4770 512 MB - Windows 7 Home Premium 32Bit - XProfan X4
06.09.2016  
 




HofK
Soeben aufgefallen:

Beim Firefox muss man in den Einstellungen unter Erweitert, dort Allgemein unter Eingabehilfen bei "Suche bereits beim Eintippen starten" den Haken rausnehmen.

Ansonsten landen die Steuertasten + - e s d x für den Androiden
in der Suchleiste und der Android bewegt ---- ++++ sich nicht!
 
07.09.2016  
 




HofK
In der gerade aktualisierten Seite  [...] 
habe ich beim neuen Beispiel "Androide lernt werfen" das eigene Script eingebettet. So kann man einfacher mit "Seitenquelltext anzeigen" sehen wie es gemacht ist.

(Achtung: geänderte Steuertasten. Neuer Wurf: vorerst mit F5 aktualisieren.)
 
12.09.2016  
 




HofK
Eigentlich sollte der Androide nur eine Anzeige seiner Treffer auf einer über seinem Haupt schwebenden Tafel bekommen. Dreidimensional mit Kugeln. Die hat er auch:



Als "Abfall" ist dabei gleich noch ein editierbarer 5x7 Zeichensatz mit Demo zur Anzeige in JavaScript und XProfan entstanden.
Dabei wird die identische Datei hofk_zeichenlayout.js sowohl als Script bei der JavaScript Variante als auch als einzulesende Datei bei Xprofan benutzt.

Die Datei hofk_zeichenlayout.js muß bei Javascript im Scripte-Verzeichnis js liegen, wo sich auch das Script three.min.js befindet. Das Scriptverzeichnis js und das Verzeichnis mit der Datei display.html müssen im selben Hauptordner liegen.

Hier ist die ganze Sache komplett:

Herunterladen

Die XProfan Variante findet sich dort:  [...] 
 
09.10.2016  
 




HofK
Für "Bastler" mit etwas Dokumentation im Quellcode wie es gemacht ist.  [...]  bzw.  [...] 



Dort  [...]  findet man die entsprechende Anregung.

Hier die ganze Sache zum offline basteln:Herunterladen

Der Baufortschritt wird lokal per Browser gespeichert und steht nach erneutem Aufruf automatisch bereit!

Weitere interessante Tutorials: (Wie leider fast immer nur in Englisch!) [...]  [...] 

IE und Edge packen es nicht!
 
29.10.2016  
 




HofK
Im obigen Beispiel habe ich nach dem etwas älteren Tutorial  [...]  Release 71 von three.js benutzt.

Mittlerweile ist bereits r82 aktuell: [...] 

Damit getestet - funktioniert!

Nach dem Download findet man die aktuelle three.js und die minimierte three.min.js im Ordner \three.js-r82\build. Um nicht durcheinander zu kommen, versieht man gegebenenfalls die Dateien mit dem release. Also dann z.B. three.min.82.js
 
30.10.2016  
 




HofK
Weiter oben gibt es einen eigenen Zeichensatz, nun habe ich mal mit THREE.TextGeometry() experimentiert. Dazu  [...]  begutachtet.

Bei der weiteren Recherche stellt man fest, dass es mit den Fonts nicht ganz so einfach zu sein scheint.

Schon 2012:  [...] 

und recht neu

"Problem with TextGeometry in r74 · Issue #8194 · mrdoob/three.js ... [...] 
22.02.2016 - With the newest version (r74) I am unable to bring any textGeometry to work: ... So in the three.js TextGeometry I type : "Helvetiker". So, what the ... "


Promt führt der Versuch statt Release 71 die neue 82 zu benutzen zum Fehler!

Zum Problem wird es, wenn man im Projekt irgendeine neue Sache benutzen möchte. Betrachtet man die lange Liste der Releases  [...]  , findet man dort nicht nur Ergänzungen sondern auch Weglassungen/Änderungen: schwer überschaubar.

Auf  [...]  findet sich der3D Text:



Hier die Sache komplett: Herunterladen

 
31.10.2016  
 




HofK
Noch nicht ganz so perfekt wie Angelique Kerber , Boris Becker & Steffi Graf, aber mit knapp 800 Code-Zeilen und einigen Bibliotheken doch schon als Beta spielbar. Natürlich reichlich dokumentiert.

Androiden Ring-Tennis



Der kleine Mini-Androide lauert schon, dass der Ball über die Bande fliegt - dann tritt er in Aktion.

Einfach unter  [...]  bzw.  [...] 
ausprobieren.

Gut läuft es unter Chrome und Opera. Bewegen von Androide/ Anzeige und drehen des Tennisspielers mit der Maus erfordern etwas Übung - näher herangehen.

Hier die Sache für das offline-Vergnügen:Herunterladen

Entpacken und im Ordner android_play die 35_androide_play.html mit einem geeigneten Browser öffnen. Die Bibliotheken müssen an ihrem Ort im parallelen Ordner js bleiben!


Viel Spaß auf dem Weg zum Tennisprofi. -------------
 
12.11.2016  
 




HofK
Beim Androiden Ring-Tennis habe ich eine inhaltsbezogene Kollisionserkennung auf der Basis des Abstands der wichtigsten Objekte realisiert.

Three.js bietet aber auch eine Variante über integrierte Funktionen an. Damit kann man dann auch erkennen, wenn eine "Nase" an die Wand donnert.



Da  [...]  bzw.  [...]  kann man es ausprobieren und den Seitenquelltext ansehen.

Wer die Nase offline gegen die Wand fahren möchte: Herunterladen

Dort  [...]  bin ich zu diesem Problem fündig geworden.

Übrigens: edge packt selbst mein einfaches Beispiel nur mit unhaltbaren Verzögerungen, bei der komplexeren Vorlage schmiert edge einfach ab und blockiert das System!

Deutlich besser: chrome.
 
16.11.2016  
 




HofK
Noch ein weiterer unvollständiger 3D Zeichensatz - für Installateure, Rohrleitungsbauer -
mit Anwendung.



Das Layout, die Konstruktion der Zeichen ist recht aufwändig, eben so, wie das Leitungen legen. Deshalb erst einmal nur die Ziffern und zum Test ein großes W. Das W muss passen, dann passen alle anderen Zeichen auch irgendwie.

Um dem Würfel im vorherigen Beispiel die Nase herauszuziehen, benötigt man die Nummerierung der Knoten. Für eine Nase kann man einfach probieren, für kompliziertere Sachen braucht man den Überblick.

Also einfach an jeden Knoten seine laufende interne Nummer auf einer kleinen durchscheinenden Tafel dranpappen. Diese richtet sich in der x-z Ebene immer auf die Kamera aus, damit man sie ordentlich lesen kann.



Die Berechnung erfordert einige Zeit, etwas warten. Wenn man es mit der Anzahl der Knoten übertreibt, geht der Browser in die Knie!

Da  [...]  kann man es anschauen und den Quelltext begutachten.

Dort [...] 
findet man eine umfangreichere Lösung mit Textsprites, die mir aber nicht so zusagte.
 
23.11.2016  
 




Antworten


Thementitel, max. 100 Zeichen.
 

Systemprofile:

Kein Systemprofil angelegt. [anlegen]

XProfan:

 Beitrag  Schrift  Smilies  ▼ 

Bitte anmelden um einen Beitrag zu verfassen.
 

Themenoptionen

332.615 Betrachtungen

Unbenanntvor 0 min.
HofK vor 23 Tagen
Rschnett24.08.2024
Michael W.28.03.2024
Thomas Zielinski17.02.2024
Mehr...

Themeninformationen



Admins  |  AGB  |  Anwendungen  |  Autoren  |  Chat  |  Datenschutz  |  Download  |  Eingangshalle  |  Hilfe  |  Händlerportal  |  Impressum  |  Mart  |  Schnittstellen  |  SDK  |  Services  |  Spiele  |  Suche  |  Support

Ein Projekt aller XProfaner, die es gibt!


Mein XProfan
Private Nachrichten
Eigenes Ablageforum
Themen-Merkliste
Eigene Beiträge
Eigene Themen
Zwischenablage
Abmelden
 Deutsch English Français Español Italia
Übersetzungen

Datenschutz


Wir verwenden Cookies nur als Session-Cookies wegen der technischen Notwendigkeit und bei uns gibt es keine Cookies von Drittanbietern.

Wenn du hier auf unsere Webseite klickst oder navigierst, stimmst du unserer Erfassung von Informationen in unseren Cookies auf XProfan.Net zu.

Weitere Informationen zu unseren Cookies und dazu, wie du die Kontrolle darüber behältst, findest du in unserer nachfolgenden Datenschutzerklärung.


einverstandenDatenschutzerklärung
Ich möchte keinen Cookie