Wie Sie mit einer JSON Datei Animationen, Interaktionen und viele weitere Anpassungen der 3D-Umgebung hinzufügen.

Um die 3D-Interaktion zu ermöglichen oder auch Anpassungen von Kameras, Beleuchtung und einigem mehr vornehmen zu können, sind individuelle Einstellungsmöglichkeiten über das JSON-Textfeld in der Stage im Admin-Menü von klar.land vorzunehmen. Wie dies im Detail funktioniert, erklären wir hier.

JSON-Textfeld (Empfehlung: JSON in einem Code/Texteditor wie z. B. notepad++ erstellen und hier einfügen)

Ein minimaler JSON-Code kann nach dem Upload einer glb-Datei durch den Button „Standardjson generieren“ generiert werden (die glb-Datei muss zumindest eine Kamera mit dem Namen „Defaultcam“ enthalten).

Minimaler JSON-Code sieht wie folgt aus (damit funktioniert eine Stage bereits). Dieser Code kann anhand der folgenden Dokumentation beliebig erweitert werden.

{
 "Stage3dData" :[
{
 "threedfile" : "Dateiname.glb",
 "outlinelevel" : 0,
 "lightsetup": 0,
 "spritescale": 1,
 "defaultqualitylevel": 0,
 "scenetype": "_3d"
}
]
}

(!) wichtiger Hinweis: bei den folgenden JSON-Codeschnipseln können teilweise Klammern fehlen oder Parameter sind nur in allgemeiner Form wie [number] angegeben. Daher empfiehlt es sich, Code nur aus funktionierenden JSONs von Stages zu kopieren bzw anzupassen.

Anforderung an Daten

Stage3dData muss angegeben sein:

Aufbau:

"Stage3dData" :[
    {
   "threedfile" : "szenenname.glb",
    "outlinelevel" : [number],
  "perspectives":[
          {
              "name":"Standard Kamera",
              "camera":"Defaultcam"
          }
],
    "lightsetup": [number],
    "spritescale": [number],
    "defaultqualitylevel": [number],
    "scenetype": [string]
    },
 ],
"AOMaps" : [
    {
    "mesh":"Meshname",
    "aomap":"Texturname.jpg"
    }
],

Erklärung:

threedfile“ : „szenenname.glb“ Dateiname der Szene (aktuell nur glbs unterstützt)

outlinelevel“ : 0 wenn Objekte bei Szenenladen schon die Outline (blauer Rahmen zur Hervorhebung klickbarer Objekte) erhalten sollen, 1 wenn Objekte ihre Outline erst nach dem Klick auf den Button erhalten sollen.

perspectives“ : optional, Auflistung der Kameras, die im Menü erscheinen sollen

lightsetup“ : 0 verwendet nur HDR, 1 verwendet HDR + Point + Arealight (aktuell nicht implementiert)

 „spritescale“ : 1 die Skalierung der Button-Texturen,

defaultqualitylevel“ : 0 = renderpass + outlinepass + fxaapass (kompromiss aus Leistung + Aussehen), 1 = ssaapass + outlinepass       (Besseres Anti-Aliasing, schlechtere Leistung)

scenetype“ : „3d“ oder „360“

"useCases" :[
    
            {
        "name":"Usecasename",
        "group":"Usecasegroup",
        "animationlayer": [number],
        "state":[number],
            "trigger_objects":["triggerobject"],
            "cam":
            {
                "name": "camname",
                "position": [0, 0, 0],
                "rotation":[0, 0, 0],
                "lookatTarget": "lookatobject"
            },
            "animations":
            [
                {
                    "name":"Objektname Anim01",
                    "tc":0,
                    "loop":"true"
                },
                {
                    "name":"Objektname Anim02",
                    "tc":0 
                }
            ]
    },

camname“ muss auf cam enden

lookatTarget“ : „lookatobject“ (falls nicht angegeben wird als lookattarget das angeklickte Objekt verwendet)

name“ : „[Objektname Anim01]“ (muss sowohl in glb als auch in JSON mit dem Animationsobjekt beginnen, anschließend ein Leerzeichen und dann der eindeutige Animationsname) // z. B. ‚klappe_oben_Armature auf‘, falls ein Leerzeichen im Animationsnamen softwarebedingt (z. B. bei 3dsMax) nicht möglich ist, so kann auch ein % Zeichen verwendet werden

tc“ :[number] (timecode in Sekunden, Animation wird nach der angegebenen Zeit abgespielt, d. h. es ist nur eine Verzögerung des Starts – die Animation wird vollständig abgespielt)

loop“ : true (wenn angegeben und true wird die Animation als loop abgespielt, wiederholt sich also)

autoplay“ : true – falls eine Animation von Anfang an automatisch abgespielt werden soll

Erklärung zu Animationslayern/States

Animationlayer werden primär für das Highlighting von Objekten und die Zuordnung verwendet, welche Objekte beim Klick auf welche Objekte gehighlited und auswählbar sind.

State wird dafür verwendet, wenn ein Objekt mehrere Zustände hat und je nach Zustand eine andere Animation abspielen soll.

z. B.:

Animationlayer 0: Bekommt kein Highlighting und wird für die Buttons verwendet, also wenn die Kamera an einen Ort springt ohne Interaktion.

Animationlayer 1: Wird gehighlighted, sobald das animationlayer 0 Objekt (der Button) der Gruppe angeklickt wurde.

Animationlayer 2: Wird gehighlited sobald das Objekt des Animationlayer 0 der Gruppe angeklickt wurde.

Beispiel:

Animationlayer 0: springe zu Schublade 3

Animationlayer 1: öffne Schublade 3

Animationlayer 2: Spiele Animation von angeklicktem Messer, was sich in der Schublade befindet, ab.

State 0/1 werden zum Animationstoggeln verwendet aktuell:

Also:

Objekt standardmäßig in state 0, wird es angeklickt, wird geguckt, ob es eine Animation mit dem state 1 hat. Sollte das der Fall sein wird die Animation abgespielt und das Objekt befindet sich im state 1.

Wird es jetzt nochmal angeklickt wird die state 1 Animation abgespielt und das Objekt wieder in den state 0 versetzt.

Beispiel:

State 0: Müslischranktür geht auf

State 1: Müslischranktür geht zu (bearbeitet) 

Mehr States als 0 und 1 und die Abfrage dieser sind aktuell geplant/in Arbeit.

Weitere Angaben:

Animations array kann als animation in ein animationsarray eingefügt werden. Diese Animationssequenz kann dann gelooped werden.

Background Color

Einstellung der Hintergrundfarbe:

{
  "Stage3dData": [
    {
	"backgroundColor": "rgb(81, 87, 99)",
	.....

Zusätzlich zu rgb kann die Hintergrundfarbe noch folgendermaßen angegeben werden:
„rgb(255, 0, 0)“
„rgb(100%, 0%, 0%)“
X11 color name – all 140 color names are supported.
 ’skyblue‘
//HSL string
„hsl(0, 100%, 50%)“

Hdr Umgebungslicht

Optional.

Falls nicht angegeben, wird das default-Studio-Hdr verwendet: /files/stages/hdr/studio_01.hdr.

Unter „hdr“ – „name“ hat man die Möglichkeit , den Dateinamen der Hdr-Datei für diese Stage anzugeben. Diese muss auf dem Server unter „/files/stages/hdr“ liegen. Die Datei senden Sie ihrem klar.land Account Manager, welcher sie für Sie dort zur Verfügung stellt.

Wir bieten aktuell folgende Standard HDRI:

  • adams_place_brigde_1k.hdr
  • autoshop_01_1k.hdr
  • comfy_cafe_1k.hdr
  • gradient_01.hdr
  • hotel_room_1k.hdr
  • shanghai_bund_1k.hdr
  • skylit_garage_1k.hdr
  • studio_01.hdr
  • studio_01_heller.hdr
  • studio_small_06_1k.hdr
  • studio_small_08_1k.hdr
  • venice_sunset_1k.hdr
  • white.hdr

intensity“ : Intensität des Lichts – muss ggf. mehrfach getestet werden.

Beispiel – JSON:

"Stage3dData" :[
    {
      "threedfile" : "muellmaschiene.glb",
      "outlinelevel" : 0,
      "lightsetup": 0,
       "hdr":{
          "name":"venice_sunset_1k.hdr",
         		 "intensity": 3
      },
      "spritescale": 1,
      "defaultqualitylevel": 0,
      "scenetype": "3d",

HTML Dokumente über Objektklick aufrufen

Dies lässt sich im documents – Bereich innerhalb eines Usecases anlegen:

Beispiel – JSON:

 {
      "cam": {
        "name": "rauchmelder01cam",
        "position": [
          0,
          0,
          0
        ],
        "rotation": [
          0,
          0,
          0
        ],
        "lookattarget": "rauchmelder01"
      },
      "name": "rm",
      "group": "rm",
      "state": 0,
      "documents": [
        {
          "name": "rauchmelder.html",
          "type": "html",
          "uuid": "d90701d8-0769-4ba6-b23e-327ca0637df1",
          "playonclick": true
        }
      ],
      "animationlayer": 0,
      "trigger_objects": [
        "rauchmeldergruppe01"
      ]
    },

Hyperlink per Objektklick aufrufen

Dazu muss in einem Usecase

„gotourl“ : „URL“ eingetragen werden

(wird aktuell in neuem Tab geöffnet)

Beispiel – Usecase:

  {
	"name":"zb out",
        "group":"zb",
        "animationlayer": 0,
        "state":0,
        "gotourl":"https://www.klar.land",
	"trigger_objects":["zbgroup"],
	"cam":
	{
        "name": "zbcam",
	"position": [0, 0, 0],
	"rotation":[0, 0, 0]
	},
        "animations":
            [
	        {
                    "name":"zbgroup%out",
                    "tc":0
		}
	]
    }

Material – Animationen

Grundsätzlich kann man in jedem beliebigen useCase ein materialAnimations Array Objekt erstellen:

materialAnimations„: [{}] In diesem können die folgenden Parameter eingetragen werden:

name: hier muss nichts beachtet werden außer das der Name eindeutig ist und kein zweites mal in der json vorkommt.

action: hier muss angegeben werden, was für eine Materialanimation ausgeführt werden soll.
Mögliche Werte sind:

changeMaterialValue
addMaterialValueTween

changeTexturePositionValue
addTexturePositionValue

changeTextureRotationDegreeValue
addTextureRotationDegreeValue

stopMaterialAnimation

Zur Erklärung:

Der Unterschied zwischen add und change ist, dass bei add die gewünschten Werte auf die alten Materialwerte addiert werden, bei change werden die aktuellen auf die angegebenen Werte geändert.
Dies ist vor allem für loops relevant.

Soll sich eine Textur z.B. auf der x-Achse nach rechts bewegen, könnte man changeTexturePositionValue verwenden, z.B. von 0 auf 2. Würde man dann angeben, dass dies als Loop ausgeführt werden soll, würde sich die Textur von der Position x=0 auf x=2 bewegen. Beim zweiten Ausführen des Loops würde sich die Textur aber nicht mehr bewegen, da sie zwar auf x=2 bewegt wird, aber bereits an dieser Position ist.

Will man also pro Loopdurchlauf den Wert jeweils um 1 erhöhen, sollte man die passende „add“ Action verwenden. Hierdurch ist es möglich, sowohl Materialwerte anzupassen als auch Texturen zu rotieren oder zu bewegen. Durch stopMaterialAnimation lassen sich laufende MaterialAnimationen stoppen. Das ist z.B. bei Animationen relevant, die in einem infinite loop sind und gestoppt werden sollen.

Loop:

Dies ist ein optionaler Parameter.

Ist er nicht gesetzt, so wird die materialAnimation ein einziges mal ausgeführt.
Ist dieser Parameter gesetzt und hat den Wert 0 oder true, so wird er unendlich gelooped.
Wird hier ein Zahlenwert angegeben, so wird die Animation so oft geloopt wie im Wert angegeben.
loop = 12 führt dazu das die Materialanimation genau 12 mal wiederholt wird.

start_tc:
end_tc:

Hier wird die Start und Endzeit der Animation in Sekunden definiert (Nachkommastellen sind möglich).
start_tc gibt an, wann nach dem Ausführen des UseCases die Materialanimation anfangen soll.

start_tc = 2 startet die Animation 2 Sekunden verzögert, bei start_tc = 0 startet die Animation sofort.
end_tc gibt an wann die Animation stoppen soll.

Die Kombination aus beiden Werten bestimmt, wie schnell die Animation ausgeführt werden soll. Je näher start_tc und end_tc beieinander liegen, desto schneller wird die Animation abgespielt.

materialName:Hier muss der Name des Materials angegeben werden, das animiert werden soll.

materialproperty:bestimmt welche Materialeigenschaft/ Textur beeinflusst werden soll.

mögliche MaterialEigenschaften:

opacity
emissiveIntensity
emissive
aoMapIntensity
bumpScale
color
displacementScale
envMapIntensity
lightMapIntensity
metalness
roughness

mögliche Texturen:

map
alphaMap
emissiveMap
aoMap
bumpMap
envMap
displacementMap
lightMap
metalnessMap
normalMap

affectedvalue:
Dies ist ein optionaler Parameter, der nur angegeben werden muss, wenn die Aktionen addTexturePositionValue oder changeTexturePositionValue angegeben werden.
Hier kann aktuell x oder y angegeben werden.
Soll sich eine Textur also horizontal bewegen, würde man x angeben, soll sie sich vertikal bewegen, würde man hier y eintragen.
z.B.: „affectedvalue“: „x“,

tweenValue
Der Zahlenwert auf den die ausgewählte Eigenschaft gesetzt werden soll.
Ist eine Texturrotations Aktion ausgewählt, so sollte die gewünschte Rotation in Grad angegeben werden.
z.B. Textur einmal um 180 Grad drehen:
„tweenValue“: 180,

json Beispiel:

{
  "useCases": [
    {
      "name": "Start Opacity Animation",
      "group": "Material",
      "state": 0,
      "animationlayer": 0,
      "trigger_objects": [
        "Cube0"
      ],
      "materialAnimations": [
        {
          "loop": true,
          "name": "changeOpacity",
          "action": "changeMaterialValue",
          "end_tc": 10,
          "start_tc": 0,
          "tweenValue": 0,
          "materialName": "Material0",
          "materialproperty": "opacity"
        }
      ]
    },
    {
      "name": "Start Diffuse Map Animation",
      "group": "Material",
      "state": 0,
      "animationlayer": 0,
      "trigger_objects": [
        "Cube1"
      ],
      "materialAnimations": [
        {
          "loop": 0,
          "name": "add diffuse pos",
          "action": "addTexturePositionValue",
          "end_tc": 2,
          "start_tc": 0,
          "tweenValue": 2,
          "materialName": "Material1",
          "affectedvalue": "x",
          "materialproperty": "map"
        }
      ]
    },
    {
      "name": "Start AlphaMap Animation",
      "group": "Material",
      "state": 0,
      "animationlayer": 0,
      "trigger_objects": [
        "Cube5"
      ],
      "materialAnimations": [
        {
          "name": "add diffuse pos",
          "action": "addTexturePositionValue",
          "end_tc": 8,
          "start_tc": 0,
          "tweenValue": 2,
          "materialName": "Material5",
          "affectedvalue": "x",
          "materialproperty": "map"
        }
      ]
    },
    {
      "name": "Start Diffuse Map Animation",
      "group": "Material",
      "state": 0,
      "animationlayer": 0,
      "trigger_objects": [
        "Cube2"
      ],
      "materialAnimations": [
        {
          "loop": 2,
          "name": "change diffuse pos",
          "action": "changeTexturePositionValue",
          "end_tc": 10,
          "start_tc": 0,
          "tweenValue": 2,
          "materialName": "Material2",
          "affectedvalue": "y",
          "materialproperty": "map"
        }
      ]
    },
    {
      "name": "Start Diffuse Map Rotation Animation",
      "group": "Material",
      "state": 0,
      "animationlayer": 0,
      "trigger_objects": [
        "Cube3"
      ],
      "materialAnimations": [
        {
          "loop": 1,
          "name": "add diffuse rotation",
          "action": "addTextureRotationDegreeValue",
          "end_tc": 10,
          "start_tc": 0,
          "tweenValue": 180,
          "materialName": "Material3",
          "materialproperty": "map"
        }
      ]
    },
    {
      "name": "trigger lod1 anim",
      "group": "Cube6",
      "state": 0,
      "animations": [
        {
          "tc": 0,
          "name": "Cube6_lod1 Action"
        }
      ],
      "animationlayer": 0,
      "trigger_objects": [
        "Cube6_lod1"
      ]
    },
    {
      "name": "Stop Opacity Animation",
      "group": "Material",
      "state": 0,
      "animationlayer": 0,
      "trigger_objects": [
        "Cube4"
      ],
      "materialAnimations": [
        {
          "name": "changeOpacity",
          "action": "stopMaterialAnimation",
          "start_tc": 0
        }
      ]
    }
  ],
  "Stage3dData": [
    {
      "controls": {
        "maxZoom": 100000,
        "minZoom": 1,
        "zoomMode": 1,
        "maxDistance": 100000,
        "minDistance": 1
      },
      "scenetype": "_3d",
      "lightsetup": 0,
      "threedfile": "cube6.glb",
      "loddistance": 5,
      "spritescale": 1,
      "outlinelevel": 0,
      "defaultqualitylevel": 0
    }
  ]
}

Medien aufrufen (pdfs/Videos/…)

Video, das durch Klick auf einen Button oder ein Objekt ausgelöst wird

Es gibt die Möglichkeit, beim Anklicken eines Objekts oder Buttons eines oder mehrere Dokumente (Video/mp4, pdf, jpg, png) abzurufen, die daraufhin im Tab „Medien“ zum Abrufen erscheinen.

Die Medien müssen im docs-Ordner der jeweiligen Stage auf den Server geladen werden: /files/stages/[uuid]/docs. (Die Daten übermitteln Sie Ihrem Account Manager von klar.land, welcher die Daten für Sie dort ablegt.)

trigger_objects“ auslösendes Objekt oder Button

cam“ – hier wird u. a. der Name der zugehörigen Kamera und des Kameratargets angegeben

documents“ – eines oder mehrere Dokumente zum Abrufen

type“ – video | image | pdf

uuid“ – online generieren unter https://www.uuidgenerator.net/ und kopieren + einfügen

playonclick“ : true | false – falls ein Dokument direkt erscheinen soll

Beispiel – JSON:

"useCases" : [
{
"name":"klick_dl_pdf",
"group":"01",
"animationlayer": 0,
"poi_uuid": "0f7fa12e-dd7c-11eb-ba80-0242ac130004",
"state":0,
"trigger_objects":["button_vorne_rechts"],
"cam":
{
"name": "Pdfcam",
"position": [0, 0, 0],
"rotation":[0, 0, 0],
"lookatTarget":"button_vorne_rechts"
},"documents":
[
{
"name":"01/Freund_Demovideo.mp4",
"type":"video",
"uuid":"ac848c20-e879-11eb-9a03-0242ac130003",
"playonclick":true
},{
"name":"01/Freunde_DemoPDF.pdf",
"type":"pdf",
"uuid":"1bd675a6-dd7c-11eb-ba80-0242ac130004"
},{
"name":"01/klardenker_Unternehmenspräsentation_DE.pdf",
"type":"pdf",
"uuid":"cb5473d6-e879-11eb-9a03-0242ac130003"
},{
"name":"01/netzwerken-web.jpg",
"type":"image",
"uuid":"fe743ad0-e879-11eb-9a03-0242ac130003"
},{
"name":"01/Showroom_Demo.mp4",
"type":"video",
"uuid":"139e7574-e87a-11eb-9a03-0242ac130003"
},{
"name":"01/Vorwort_DemoPDF.pdf",
"type":"pdf",
"uuid":"2ef28950-e87a-11eb-9a03-0242ac130003"
}
]

 

Medien aus den „Documents“ aufrufen – wichtig für die Mehrsprachigkeit

Erstelle im gewünschten Space zuerst die Dokumente. Dies machst Du wie folgt:

Zum gewünschten Space navigieren.
Dort unter Arbeitsplatz -> Docs auswählen.
Dann z.B. einen eigenen Ordner „stages“ erzeugen, hier kannst Du den Namen natürlich nach Vorliebe frei wählen.
Ordner anklicken / öffnen.
Dann über das „+“ ein Document erzeugen.
Neu erstelltes Feld für ein Dokument suchen und dort über „Browser“ nach der gewünschten Datei auf Deinem Rechner suchen und hochladen. Dann auf „Speichern“ klicken.
Sofern Du die Datei in anderen Sprachen anbieten möchtest, wähle anschließend dann die gewünschte andere Sprache aus und im Anschluss wieder über den „Dateibrowser“ die jeweils gewünschte Datei in entsprechender Sprache. Erneut auf „Speichern“ klicken, dadurch ist das Dokument dann in der neu hinzugefügten Sprache verfügbar.

Anschließend kopierst Du die UUID des Dokuments raus. Diese benötigst Du, um sie in der json in der Stage einzufügen, die erfolgt dort wie in den anderen oben aufgeführten Fällen.


Das Skript funktioniert so das es, wenn eine UUID vorhanden ist, überprüft, ob ein passender Datenbankeintrag vorhanden ist. Wenn das der Fall ist, wird das Dokument geladen und angezeigt. Wenn es nicht der Fall ist, wird der Name/ Pfad genommen und die entsprechende Datei geladen. Dadurch werden bestehende Stages nicht zerschossen.

Bei neuen Stages reicht es dann die UUID und den Type anzugeben.

Ein Beispiel eines json Eintrags mit Dateiverlinkung über die Doc UUID:

"useCases" : [
"name": "klick_dl_pdf_03",
"group": "03",
"state": 0,
"poi_uuid": "5cdbbbbc-e883-11eb-9a03-0242ac130003",
"documents": [
{
"name": "03/klardenker_Unternehmenspräsentation_DE.pdf",
"type": "pdf",
"uuid": "8107123e-e883-11eb-9a03-0242ac130003"
},
{
"name": "03/Meditation_DemoVideo.mp4",
"type": "video",
"uuid": "3e7da4a1-6122-483b-9749-2c11caa87fd4",
"playonclick": true
},
{
"name": "03/Sein1_DemoPDF.pdf",
"type": "pdf",
"uuid": "a4ad3ec0-e883-11eb-9a03-0242ac130003"
},
{
"name": "03/Sein2_DemoPDF.pdf",
"type": "pdf",
"uuid": "b2d9a1c8-e883-11eb-9a03-0242ac130003"
},
{
"name": "03/Seminar-web.jpg",
"type": "image",
"uuid": "c1f88a5c-e883-11eb-9a03-0242ac130003"
}
],
"animationlayer": 0,
"trigger_objects": [
"button_03"
]
},
]

Spritesheets (quasi apngs) (für Buttons)

Buttons in einer Stage, die über Spritesheets animiert werden

Spritesheets, wie apngs genutzt, werden in der Gruppe „buttons“ definiert.

Die png-Dateien, die die Spritesheets enthalten, werden auf dem Server im Verzeichnis „/files/stages/sprites“ abgelegt. (Sofern Sie individuelle Spritesheets nutzen möchten, stellen Sie diese Ihrem Account Manager von klar.land zur Verfügung und er kann diese dann auf dem Server zur Verfügung stellen.)

buttonObjectName“ ist der Name des 3D-Objekts in der Szene. Die Zeichenfolge „button“ sollte im Namen enthalten sein. Dadurch verhält sich das Objekt wie ein Button. D. h. er wird stets zur Kamera ausgerichtet sein und bei Klick verschwindet der Button.

spritename“ ist der Name der png-Datei, die im „/files/stages/sprites“ liegt.

tilesHoriz“ : Anzahl der horizontalen Kacheln

tilesVert“ : Anzahl der vertikalen Kacheln

numTiles“ : normalerweise ist dies das Produkt der beiden vorherigen Werte. Dies kann in Ausnahmefällen aber auch ein anderer Wert sein (wenn es z. B. einige leere Kacheln am Ende gibt).

tileDispDuration“ : Anzahl an Millisekunden, für die eine Kachel angezeigt werden soll

invisibleOnClick“ : true oder false, optional. Gibt an, ob ein Button nach Klick unsichtbar wird oder nicht (=false). Default ist true.

Beispiel – JSON:

"Stage3dData" :[
{
"threedfile" : "01.glb",
"outlinelevel" : 0,
"lightsetup": 0,
"spritescale": 1,
"defaultqualitylevel": 0,
"scenetype": "3d",
"buttons":[
{
"buttonObjectName":"button_vorne_rechts",
"spritename":"floorbutton_spritesheet.png",
"tilesHoriz":25,
"tilesVert":1,
"numTiles":25,
"tileDispDuration":55,
"invisibleOnClick":"false"
}		
],

Tonemapping

Man kann aus 5 Modi wählen, um den Look der Stage durch Tonemapping anzupassen (Post-Rendereffekt).

Dies braucht ggf. mehrere Tests in Kombination mit dem Hdr und Lichtintensitäten, um für die jeweilige Stage den optimalen Look zu erreichen.

Falls nichts angegeben wird, wird standardmässig THREE.ACESFilmicToneMapping verwendet.

Beispiel – JSON:

{
"Stage3dData": [
{
"tonemapping": 2,
....

tonemapping kann die Werte 0, 1, 2, 3, 4 oder 5 annehmen – dabei ist

0 = THREE.NoToneMapping

1 = THREE.LinearToneMapping

2 = THREE.ReinhardToneMapping

3 = THREE.CineonToneMapping

4 = THREE.ACESFilmicToneMapping

5 = THREE.CustomToneMapping

Apartment Stage mit ReinhardToneMapping / „tonemapping“: 2

Apartment Stage mit ACESFilmicToneMapping / „tonemapping“: 4 bzw keine Angabe

Videotexturen

Videotexturen in einer Stage

Für Videotexturen werden die jeweiligen Namen der 3D-Objekte („videoObject“), auf denen die Videotexturen erscheinen sollen, sowie der relative Pfad zum Videofile („videoFile“) auf dem Server angegeben.

Die Videos müssen im docs-Ordner der jeweiligen Stage auf den Server geladen werden: /files/stages/[uuid]/docs

(Stimmen Sie die Datenablage mit Ihrem Account Manager von klar.land ab.)

Beispiel – JSON:

"Stage3dData" :[
{
"threedfile" : "01.glb",
"outlinelevel" : 0,
"lightsetup": 100,
"spritescale": 1,
"defaultqualitylevel": 0,
"scenetype": "3d",
"videotextures":[
{
"videoObject":"_videoplane",
"videoFile":"01/Freund_Demovideo.mp4"
}
]
}
]

„controls“-Optionen

Diverse Parameter, um Zoom und Distanz der Kameras sowie Maustastenbelegung einer Stage einzustellen.

Beispiel – JSON:

{
"Stage3dData": [
{
"hdr": {
"name": "autoshop_01_1k.hdr",
"intensity": 2
},
"controls": {
"maxZoom": 5,
"minZoom": 1,
"zoomMode": 2,
"maxDistance": 5,
"minDistance": 1
},
{
"Stage3dData": [
{
"controls": {
"zoomMode": 3,
"leftMouseMode":5,
"middleMouseMode":1,
"rightMouseMode": 1,
},
......

„zoomMode“ kann die Werte 1 / 2 / 3 annehmen. Diese bedeuten

1 = Dolly (Standard)
2 = ZOOM
3 = NONE

d. h. 3 deaktiviert den Zoom

„leftMouseMode“ / „middleMouseMode“ / „rightMouseMode“ können jeweils die Werte 1 / 2 / 3 / 4 / 5 / 6 annehmen. Diese bedeuten

1 = ROTATE
2 = TRUCK
3 = OFFSET
4 = DOLLY
5 = ZOOM
6 = NONE

Falls im JSON-Code nichts spezifiziert wird, sind die Standardwerte

zoomMode = Dolly
leftMouseMode = ROTATE
rightMouseMode = TRUCK
middleMouseMode = DOLLY

360° Stages

(Dokumentation folgt)

"spaces" : [ (werden nur in 360° Szenen verwendet)
{
"id" : [number] Stageid,
"name": [string] Stagename,
"ClickSpots":
[
{
"name":"Gehe in Flur",
"position": [8.67872, 15.1609, -12.1186],
"type":"spaceChangeSpot",
"gotoSpace": [number]
},{
"name":"Zeige Lampeninfo",
"position": [-15.4345, 6.06061, 0],
"type":"infoSpot"
}
]
},