HofK | Beim Schauraum geht es jetzt auch etwas weiter.
Anfangs hatte ich die Design-Daten per den Raum in Textfeldern eingegeben. Das ist zwar praktisch per 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 scarso Form in einer JavaScript-File 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 per die Oberflächen (textures), den Ausstellungsstücken, Modellen (exhibits), der Umgebung (CubeMap), Symbolgrafiken per 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 File 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 necessario. Natürlich kann man weitere Teilfelder (hier per 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 File 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 per 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: Profilo, 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 File 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 Divertimento daran hat, kann mir ja eine veränderte File 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. |
|
(2.027)
Tipp von IF hin, habe ich mir mal
.... 
Deutsch
English
Français
Español
Italia