79
edits
IFD:Web Advanced II SS13/Felix Trojan (view source)
Revision as of 13:49, 19 October 2013
, 19 October 2013no edit summary
No edit summary |
No edit summary |
||
| Line 32: | Line 32: | ||
[[Image:controls.png]] | [[Image:controls.png]] | ||
Die obere "Lichtbox" dient zur Manipulation von Lichtquellen. Dem Maus-Cursur folgt standardmäßig eine Punktlichtquelle, welche mit der mittleren Box an- und ausgeschaltet werden kann. Mit den Trapezen an der Seite, lassen sich Scheinwerfer-Lichtquellen (Directional Lights) hinzu- und wegschalten. Da die Figuren und Steine meist etwas gekrümmt sind, führt dies zu interessanten und unterschiedlichen Schattenwürfen. | Die obere "Lichtbox" dient zur Manipulation von Lichtquellen. Dem Maus-Cursur folgt standardmäßig eine Punktlichtquelle, welche mit der mittleren Box an- und ausgeschaltet werden kann. Mit den Trapezen an der Seite, lassen sich Scheinwerfer-Lichtquellen (Directional Lights) hinzu- und wegschalten. Da die Figuren und Steine meist etwas gekrümmt sind, führt dies zu interessanten und unterschiedlichen Schattenwürfen. | ||
| Line 55: | Line 56: | ||
==Hinweise und Sonstiges== | ==Hinweise und Sonstiges== | ||
Three.js macht das Benutzen von WebGL extrem einfacher. Außerdem bietet es nützliche Klassen, wie zum Beispiel den Raycaster, dem man einen Strahl übergibt und der damit beliebige Objekte schneidet und natürlich diese zurückliefert. Der Raycaster wird hier benutzt um die Pitoti-Figuren im "Map Mode" mit Mouseover und OnClick Events zu versehen. Im "Viewer Mode" wird der Schnittpunkt aus einem Strahl der vom Cursur ausgeht, dazu verwendet um die Maus-Lichtquelle zu positionieren. | |||
Aus CSS3 werden die Opacity für die Buttons, abgerundete Ecken und Farbverläufe benutzt. JQuery wird hauptsächlich für die Manipulation des DOM und für das anlegen von Event Listeners benutzt. | |||
Die Modelle wurden von einem ursprünglichen hochauflösenden Obj-Modell, in Blender importiert und deren Komplexität verkleinert, sodass sie i.d.R. nicht größer sind als 2 MB. Zusätzlich werden sie in ein von Three.js verwendetes JSON-Format konvertiert. Es gibt zwar einen OBJ-Loader in Three.js, dieser ist aber extrem langsam, weil er wahrscheinlich intern genau diese Formatierung vornimmt. Durch die kleinen Modellen gehen natürlich Details verloren, aber nur so ist es möglich, das diese auch auf langsameren Rechnern flüssig angezeigt werden. Außerdem werden sie dadurch auch schneller geladen. | |||
Der Viewer läuft außerdem auch auf Tablets und dass sogar mit vollem Funktionsumfang. Getestet wurden auf einem Nexus 7 mit dem Chrome Browser. | |||
In Chrome scheint der Viewer generell besser zu laufen, so ruckelt er leicht in Firefox, ist aber noch gut benutzbar. Den Grund konnte ich leider nicht ausmachen. | |||
==Props== | ==Props== | ||
Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat. | Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat. | ||