HofK | Beim Schauraum geht es jetzt auch etwas weiter.
Anfangs hatte ich die Design-Daten für den Raum in Textfeldern eingegeben. Das ist zwar praktisch für schnelles testen, aber bei dem inzwischen stark gewachsenem Umfang an Daten nicht mehr praktikabel.
Für die finale Variante werden die Daten deshalb in einer halbwegs übersichtlichen aber knappen Form in einer JavaScript-Datei showroomDesign.js gespeichert.
Diese kann als reine Textdatei einfach editiert werden und nach Aktualisierung der html-Seite ist das Ergebnis sofort sichtbar.
Das Projektverzeichnis enthält Ordner mit den Grafiken für die Oberflächen (textures), den Ausstellungsstücken, Modellen (exhibits), der Umgebung (CubeMap), Symbolgrafiken für die Steuerung des Besuchers per circleControl, (ccimg) und die nötigen System-JavaScrips (js).
Die fünf eigentlichen Projektdateien sind derzeit bei der Entwicklung alle noch im Projektverzeichnis vereint.
Die Datei showroomDesign.js ist noch nicht ganz fertig/ noch in Bearbeitung.
Man kann aber die innere Logik erkennen.
Geometrie und Material müssen getrennt eingegeben werden, eine Zusammenlegung wird unübersichtlich. Bei der Trennung hilft eine Nummerierung die Zusammengehörigkeit zu überschauen.
Am Beispiel der runden Wände:
roundWallsArray = [
// round walls / runde Wände:
// x,z, y0 lower niveau / unteres Niveau, y1 upper niveau / oberes Niveau,
//rx radius ,rz radius, radius segments, start angle / Startwinkel, angle / Winkel
[ 2,2, 0,3.5, 2,2, 12, 3.14,1.57 ], //01
[ 0,4.5, 0,3.5, 2.5,2.5, 12, 3.14,3.14 ] //02
];
roundWallsMaterialArray = [
[ 'Textur', 'uvgrid01.png', doubleSide ], //01
[ 'Textur', 'uvgrid01.png', doubleSide ], //02
];
Die umschließenden Hauptfelder dürfen derzeit noch nicht verändert werden. Allerdings kann man sie leer lassen, wenn man hier z.B. keine runden Wände benötigt. Natürlich kann man weitere Teilfelder (hier für weitere runde Wände) einfügen
(Die Möglichkeit der kompletten Entfernung wird noch eingearbeitet!)
Wenn man sich eine Zeichnung vom Raum macht, ist der Eintrag der Werte recht einfach zu bewerkstelligen.
// ----------- SHOWROOM DESIGN ---------------------------
// en / de
// ground plan / Grundriss
plans = [
// Points Ground plan lines counter-clockwise / Punkte Grundrisslinien gegen Uhrzeigersinn:
// x, z, y0 floor height /Bodenhöhe, y1 ceiling height/ Deckenhöhe, ...
[ 0,7, 0,3.5, 9,7, 0,3.5, 9,0, 0,3.5, 0,0, 0,3.5 ], // 01 main room / Hauptraum
[ -2.5,7, 0,3.5, 0,7, 0,3.5, 0,2, 0,3.5, -2.5,2, 0,3.5 ], // 02 oriel, round wall / Erker, Wand rund
[ 9,6, 0.2,3.5, 11,5, 0.2,3.5, 11,2, 0.2,3.5, 9,1, 0.2,3.5 ] // 03 oriel / Erker
];
// floor material / Bodenmaterial
floorsMaterial = [
// 'Textur', 'Grafikdatei', , ...Side, (optional wrap S.., wrap T.. , ... 'Basic' 'Phong' 'Lambert',
[ 'Textur', 'Granit.jpg', doubleSide ], // 01
[ 'Textur', 'Granit.jpg', doubleSide ], // 02
[ 'Textur', 'Granit.jpg', doubleSide ], // 03
];
// ceiling material / Deckenmaterial
ceilingsMaterial = [
// 'Textur', 'Grafikdatei', , ...Side, (optional wrap S.., wrap T.. , ... 'Basic' 'Phong' 'Lambert',
[ 'Textur', 'uvSpray.png', doubleSide ], // 01
[ 'Phong', 0xfeff55, doubleSide, smoothShading ], // 02
[ 'Phong', 0xfeff55, doubleSide, smoothShading ], // 03
];
plansUV = [
// main room / Hauptraum ( Textur 9:7 )
[], // auto uv's: [] , otherwise / sonst [ 0,0, 1,0, 1,1, 0,1 ],
// according to the circulation of the floor plan line / entsprechend Umlauf der Grundrisslinie
// oriel, round wall / Erker, Wand rund
[ 0,0, 0.25,0, 0.25,1, 0,1 ],
// oriel
[ 0,0.143, 0.22,0.286, 0.22,0.714, 0,0.857 ]
];
walls = [
// main room, usually without thickness, only visible from the inside, counterclockwise /
// Hauptraum, meist ohne Dicke, nur von innen sichtbar, gegen Uhrzeigersinn
// x0,z0, y00 lower niveau / unteres Niveau, y01 upper niveau / oberes Niveau , x1,z1, y10,y11, (optional: thickness / Dicke)
[ 0,7, 0,3.5, 9,7, 0,3.5 ], //01
[ 9,7, 0,3.5, 9,6, 0,3.5 ], //02
[ 9,6, 0,0.2, 9,1, 0,0.2 ], //03
[ 9,1, 0,3.5, 9,0, 0,3.5 ], //04
[ 9,0, 0,3.5, 3.2,0, 0,3.5, 0.5], //05 ->(0.5 thick / dick)
[ 3.2,0, 2.1,3.5, 2,0, 2.1,3.5 ], //06
// oriel / Erker
[ 9,6, 0.2,3.5, 11,5, 0.2,3.5 ], //07
[ 11,5, 2.6,3.5, 11,2, 2.6,3.5], //08
[ 11,2, 0.2,3.5, 9,1, 0.2,3.5 ], //09
// imagery / Bilder
[ 6,0.26, 1.3,2.8, 4,0.26, 1.3,2.8 ], //10
// Interior walls, partition walls, structural components, blockings, platforms: .. + thickness /
// Innenwände, Trennwände, Strukturbauteile, Aufblockungen, Podeste: .. , + Dicke
// [ with 6 materials each! / mit je 6 Materialien! ]
[ 0.4,5.5, 0,0.8, 1.1,5.7, 0.1,0.6, 0.6 ], //11
[ 0.2,7.0, 0.7,1.1, 1.6,5.0, 0.8,1.1, 0.7 ], //12
[ 8.0,7.5, 0.0,0.7, 8.1,7.9, 0.0,0.7, 0.1 ] //13
];
wallsMaterial = [
// 'Textur', 'graphic file / Grafikdatei', ..Side, ( optional: wrap S, wrap T)
// 'Video'
// 'Basic' 'Phong' 'Lambert', color, ..Side, ..Shading
['Textur', 'uvgrid01.png', doubleSide ], //01
['Phong', 0x886600, doubleSide, smoothShading ], //02
['Lambert', 0x222233, doubleSide, smoothShading ], //03
['Phong', 0x222233, doubleSide, flatShading ], //04
[ //05
['Video', 'sintel.xxx', backSide, 'autoplay', 'loop' ], // noch Datei und Eigenschaften zu nutzen!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!,
[ 'Textur', 'Fliese02.png', doubleSide, 27, 21 ],
[ 'Basic', 0x886600, doubleSide, flatShading ],
[ 'Basic', 0x678901, doubleSide, flatShading ],
[ 'Basic', 0x0000bb, doubleSide, flatShading ],
[ 'Basic', 0xaa00aa, doubleSide, flatShading ],
],
['Textur', 'Fliese01.png', doubleSide, 6, 15 ], //06
['Lambert', 0xeeffaa, doubleSide, flatShading ], //07
['Basic', 0xabcdef, doubleSide, smoothShading ], //08
['Basic', 0x886600, doubleSide, smoothShading ], //09
['Textur', 'QueenOfNight.png', doubleSide ], //10
[ //11 // 6 materials in the array / Materialien im Feld
[ 'Textur', 'uvgrid01.png', doubleSide ],
[ 'Textur', 'Fliese02.png', doubleSide, 27, 21 ],
[ 'Basic', 0x886600, doubleSide, flatShading ],
[ 'Basic', 0x678901, doubleSide, flatShading ],
[ 'Basic', 0x0000bb, doubleSide, flatShading ],
[ 'Basic', 0xaa00aa, doubleSide, flatShading ],
],
[ //12 // 6 materials in the array / Materialien im Feld
[ 'Textur', 'uvgrid01.png', doubleSide ],
[ 'Textur', 'Fliese02.png', doubleSide, 27, 21 ],
[ 'Basic', 0x886600, doubleSide, flatShading ],
[ 'Basic', 0x678901, doubleSide, flatShading ],
[ 'Basic', 0x0000bb, doubleSide, flatShading ],
[ 'Basic', 0xaa00aa, doubleSide, flatShading ],
],
[ //13 // 6 materials in the array / Materialien im Feld
[ 'Textur', 'uvgrid01.png', doubleSide ],
[ 'Textur', 'Fliese02.png', doubleSide, 27, 21 ],
[ 'Basic', 0x886600, doubleSide, flatShading ],
[ 'Basic', 0x678901, doubleSide, flatShading ],
[ 'Basic', 0x0000bb, doubleSide, flatShading ],
[ 'Basic', 0xaa00aa, doubleSide, flatShading ],
],
];
archways = [
// archways / Torboegen: x0,z0, x1,z1, y0 lower niveau / unteres Niveau, y1 upper niveau / oberes Niveau, thickness / Dicke
// [ with 3 materials each! / mit je 3 Materialien! ]
[ 5,1.6, 6.5,1.6, 0,2.2, 0.3 ] // 01
];
archwaysMaterial = [
[ // 01 [ 3 materials in the array / Materialien im Feld ]
[ 'Textur', 'uvgrid01.png', doubleSide ],
[ 'Basic', 0xff0000, doubleSide, smoothShading ],
[ 'Basic', 0x00ff00f, doubleSide, smoothShading ],
]
];
roundWalls = [
// round walls / runde Wände:
// x,z, y0 lower niveau / unteres Niveau, y1 upper niveau / oberes Niveau,
//rx radius ,rz radius, radius segments, start angle / Startwinkel, angle / Winkel
[ 2,2, 0,3.5, 2,2, 12, 3.14,1.57 ], //01
[ 0,4.5, 0,3.5, 2.5,2.5, 12, 3.14,3.14 ] //02
];
roundWallsMaterial = [
[ 'Textur', 'uvgrid01.png', doubleSide ], //01
[ 'Textur', 'uvgrid01.png', doubleSide ], //02
];
rounds = [
// round components / runde Bauteile: x,z, y0,y1, rx,rz, (Drehwinkel, Zuspitzung optional)
[ 7,2, 0,0.5, 0.5,0.7 , 0.785, 1.1 ] //01
];
roundsMaterial = [
[ // 01 // [ 3 Materialien ]
[ 'Phong', 0x8822dd, frontSide, flatShading ],
[ 'Textur', 'uvgrid01.png', doubleSide ],
[ 'Phong', 0x00ff00f, doubleSide, smoothShading ],
]
];
// Rahmenprofile für Rahmen: ...Shape (Querschnitt)
doorShape = [ 0,0, 0,0.05, 0.08,0.05, 0.08,0.03, 0.1,0.03, 0.1,0 ]; // Zarge
pictureShape = [ 0,0, 0.01,0.04, 0.07,0.04, 0.1,0 ]; // Bilder
frames = [
// Rahmen: Profil, x0,z0, y00,y01, x1,z1, y10,y11, optional geschlossen: 1
[ doorShape, 2,0, 0,2.1, 3.2,0, 0,2.1 ], //01
[ pictureShape, 3.91,0.25, 1.21,2.89, 6.09,0.25, 1.21,2.89, 1 ], //02
[ pictureShape, 6.15, 0.25, 0.3,3.45, 8.85,0.25, 0.3,3.45, 1 ], //03
];
framesMaterial = [
[ 'Phong', 0x4455ff, doubleSide, smoothShading ], //01
[ 'Lambert', 0x00ffff, doubleSide, smoothShading ], //02
[ 'Basic', 0x876543, doubleSide, smoothShading ], //03
];
visitorAreas = [
//Besucher, Rechtecke x0,z0, < x1,z1
[ -1.5, 3, 1.1, 6 ],
[ 1, 1, 8, 6 ],
[ 8, 2, 9, 5 ],
[ 9, 2.5, 10, 4.5 ]
];
// Spiegel
mirrors = [
// Spiegel: Typ, ...
// Typ 'wall': x0,z0, x1,z1, y0,y1, (optional: color)
// Typ 'polygon': Ecken, Radius, x,y,z-Position, x,y,z-Rotation, (optional: color)
[ 'wall', 6.225, 0.3, 8.75, 0.3, 0.4, 3.35 ],
[ 'polygon', 36, 1.6, 6, 1.8, 6.8888, -0.05, 3.1416, 0 ]
];
// Ausstellungsobjekte
exhibits = [
//Ausstellungsobjekte: 3D Format, Dateiname, x,y,z-Skalierung, x,y,z-Position, x,y,z-Rotation
[ 'json', 'flower', 0.01, 0.01, 0.01, 7, 0.0001, 3, 0, 0, 0 ],
//[ 'json', 'nefertiti', 0.1, 0.1, 0.1, 7, 1, 2, 0, 2.1, 0 ],
[ 'obj', 'flower', 0.01, 0.01, 0.01, 5.5, 0.0001, 3, 0, 0, 0 ] // dazu muss Datei flower.mtl (Material) vorhanden sein!
];
// Beleuchtung
lights = [
// Typ, Farbe
[ 'ambient', 0x444444 ],
// Typ, Farbe, Position x,y,z
[ 'point', 0xffdddd, 4, 3.4, 3 ],
]
// Umgebung:
// Textur: 6 Texturen in Reihenfolge +x,-x,+y,-y,+z,-z
//var surroundingTextur = [ 'CubeMap/', 'posx.png', 'negx.png', 'posy.png', 'negy.png', 'posz.png', 'negz.png'];
surroundingTextur = [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg'];
// Groesse, x,y,z-Position
surrounding = [ 80, 10, -0.5, -20 ];
// -------------- end of showroom design --------------------
Update 12.08. Die Endung ...Array = ... bei allen Design-Datenfeldern war nur bei der Entwicklung hilfreich. Fällt nun weg. Also statt vorher plansArray nun plans!
Wer Spaß daran hat, kann mir ja eine veränderte Datei zukommen lassen. Eventuell mit anderen Texturen. Wäre interessant, was dabei herauskommt.
Was meine Testdatei im Rundgang ergibt, werde ich mal als Video aufnehmen und dann auf meine Seite bringen. |
|
(280)
Tipp von IF hin, habe ich mir mal
.... 
Deutsch
English
Français
Español
Italia