För att möjliggöra 3D-interaktion eller för att kunna göra justeringar av kameror, belysning och mycket mer, ska individuella inställningsalternativ göras via JSON-textfältet i steget i admin-menyn på klar.land. Vi förklarar hur detta fungerar i detalj här.
En minimal JSON-kod kan genereras efter uppladdning av en glb-fil genom att trycka på knappen ”Generate defaultjson” (glb-filen måste innehålla minst en kamera med namnet ”Defaultcam”).
Minimal JSON-kod ser ut så här (ett steg arbetar redan med detta). Denna kod kan utökas efter önskemål med hjälp av följande dokumentation.
{
"Stage3dData" :[
{
"threedfile" : "Dateiname.glb",
"outlinelevel" : 0,
"lightsetup": 0,
"spritescale": 1,
"defaultqualitylevel": 0,
"scenetype": "_3d"
}
]
}
(!) Viktig anmärkning: I följande JSON-kodavsnitt kan hakparenteser saknas i vissa fall eller så anges parametrar endast i allmän form, t.ex. [number]. Därför rekommenderas det att endast kopiera eller anpassa kod från fungerande JSON-filer för steg.
Krav på uppgifter
Stage3dData måste anges:
Struktur:
"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"
}
],
Förklaring:
”threedfile” : ”szenenname.glb” Filnamn för scenen (för närvarande stöds endast glbs)
”outlinelevel” : 0 om objekten redan ska få konturerna (blå ram för att markera klickbara objekt) när scenen laddas, 1 om objekten bara ska få sina konturer efter att ha klickat på knappen.
”perspektiv” : valfritt, lista över kameror som ska visas i menyn
”lightsetup” : 0 använder endast HDR, 1 använder HDR + Point + Arealight (för närvarande inte implementerat)
”spritescale” : 1 skalning av knapparnas texturer,
”defaultqualitylevel” : 0 = renderpass + outlinepass + fxaapass (kompromiss mellan prestanda och utseende), 1 = ssaapass + outlinepass (bättre anti-aliasing, sämre prestanda)
”scentyp” : ”3d” eller ”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” måste sluta på cam
”lookatTarget” : ”lookatobject” (om inget anges används det klickade objektet som lookattarget)
”name” : ”[Objektname Anim01]” (måste börja med animationsobjektet i glb såväl som i JSON, följt av ett mellanslag och sedan det unika animationsnamnet) // t.ex. ’flap_up_armature open’, om ett mellanslag i animationsnamnet inte är möjligt på grund av programvara (t.ex. med 3dsMax), kan ett %-tecken också användas.
”tc” :[number] (tidkod i sekunder, animationen spelas upp efter den angivna tiden, dvs. det är bara en fördröjning av starten – animationen spelas upp helt)
”loop” : true (om angivet och true, animationen spelas upp som en loop, dvs. den upprepar sig själv)
”autoplay” : true – om en animering ska spelas upp automatiskt från början
Förklaring av animationslager/stadier
Animationslager används främst för att markera objekt och tilldela vilka objekt som är markerade och valbara när man klickar på vilka objekt.
State används när ett objekt har flera tillstånd och ska spela upp olika animationer beroende på tillstånd.
z. B.:
Animationslager 0: Får ingen markering och används för knapparna, t.ex. när kameran hoppar till en plats utan interaktion.
Animationslager 1: Markeras så snart animationslager 0-objektet (knappen) i gruppen klickas.
Animationslager 2: Hämtas så snart objektet i gruppens animationslager 0 klickas.
Exempel:
Animering lager 0: hoppa till låda 3
Animering lager 1: öppna låda 3
Animering lager 2: Spela upp animering av klickad kniv, vad finns i lådan.
State 0/1 används för närvarande för att växla animering:
Ja:
Objekt i tillstånd 0 som standard, om det klickas kontrolleras om det har en animering med tillstånd 1. Om så är fallet spelas animationen upp och objektet befinner sig i tillstånd 1.
Om du nu klickar på den igen spelas animationen för tillstånd 1 upp och objektet återgår till tillstånd 0.
Exempel:
Status 0: Dörren till spannmålsskåpet öppnas
Status 1: Dörren till spannmålsskåpet stängs (redigerad)
Fler stater än 0 och 1 och förhör av dessa är för närvarande planerade/på gång.
Ytterligare information:
Animationsmatriser kan infogas som animationer i en animationsmatris. Denna animeringssekvens kan sedan loopas.
Bakgrundsfärg
Inställning av bakgrundsfärg:
{
"Stage3dData": [
{
"backgroundColor": "rgb(81, 87, 99)",
.....
Förutom rgb kan bakgrundsfärgen anges på följande sätt:
”rgb(255, 0, 0)”
”rgb(100%, 0%, 0%)”
X11 färgnamn – alla 140 färgnamn stöds.
”himmelsblå
//HSL-sträng
”hsl(0, 100%, 50%)”
Hdr omgivande ljus
Valfritt.
Om inget anges används standardstudions hdr: /files/stages/hdr/studio_01.hdr.
Under”hdr” –”name” har du möjlighet att ange filnamnet på Hdr-filen för denna etapp. Denna måste finnas på servern under ”/files/stages/hdr”. Skicka filen till din kontoansvarige på klar.land, som kommer att göra den tillgänglig för dig där.
Vi erbjuder för närvarande följande standard HDRI:
- adams_place_brigde_1k.hdr
- autoshop_01_1k.hdr
- comfy_cafe_1k.hdr
- gradient_01.hdr
- hotell_rum_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
- vit.hdr
”intensitet” : ljusets intensitet – kan behöva testas flera gånger.
Exempel – JSON:
"Stage3dData" :[
{
"threedfile" : "muellmaschiene.glb",
"outlinelevel" : 0,
"lightsetup": 0,
"hdr":{
"name":"venice_sunset_1k.hdr",
"intensity": 3
},
"spritescale": 1,
"defaultqualitylevel": 0,
"scenetype": "3d",
Hämta HTML-dokument via objektklick
Detta kan skapas i dokumentområdet inom ett användningsfall:
Exempel – 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"
]
},
Anropa en hyperlänk genom objektklick
För detta ändamål, i ett användningsfall
”gotourl” : ”URL” kan anges
(öppnas i ny flik)
Exempel – 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 – Animationer
I princip kan du skapa ett materialAnimations Array-objekt i alla useCase:
”materialAnimations”: [{}] Följande parametrar kan anges i detta:
name: inget behöver beaktas här förutom att namnet är unikt och inte förekommer en andra gång i json.
åtgärd: här måste du ange vilken typ av materialanimering som ska utföras.
Möjliga värden är:
changeMaterialValue
Lägg tillMaterialValueTween
ändraTexturePositionValue
Lägg tillTexturePositionValue
ändraTextureRotationDegreeValue
lägg tillTextureRotationDegreeValue
stoppaMaterialAnimation
Som en förklaring:
Skillnaden mellan add och change är att med add läggs de önskade värdena till de gamla materialvärdena, med change ändras de nuvarande till de angivna värdena.
Detta är särskilt relevant för loopar.
Om en textur t.ex. ska flyttas åt höger på x-axeln kan man använda changeTexturePositionValue, t.ex. från 0 till 2. Om man sedan anger att detta ska göras som en loop, flyttas texturen från positionen x=0 till x=2. Men när loopen exekveras en andra gång kommer texturen inte längre att röra sig eftersom den flyttas till x=2 men redan befinner sig i denna position.
Om du vill öka värdet med 1 per loopkörning ska du använda lämplig ”lägg till”-åtgärd. Detta gör det möjligt att justera materialvärden samt rotera eller flytta texturer. Med stopMaterialAnimation kan pågående MaterialAnimation stoppas. Detta är t.ex. relevant för animationer som befinner sig i en oändlig loop och bör stoppas.
Loop:
Detta är en valfri parameter.
Om det inte anges exekveras materialAnimation en gång.
Om denna parameter är inställd och har värdet 0 eller true, loopas den oändligt.
Om ett numeriskt värde anges här, loopas animationen så ofta som anges i värdet.
loop = 12 innebär att materialanimationen upprepas exakt 12 gånger.
start_tc:
slut_tc:
Här anges start- och sluttid för animeringen i sekunder (decimaler är möjliga).
start_tc anger när materialanimeringen ska starta efter att UseCase har exekverats.
start_tc = 2 startar animationen med 2 sekunders fördröjning, med start_tc = 0 startar animationen omedelbart.
end_tc anger när animeringen ska sluta.
Kombinationen av de båda värdena avgör hur snabbt animeringen ska utföras. Ju närmare start_tc och end_tc är varandra, desto snabbare spelas animationen upp.
materialName:Namnet på det material som ska animeras måste anges här.
materialproperty:bestämmer vilken materialegenskap/textur som ska påverkas.
möjliga materialegenskaper:
opacitet
emissivIntensitet
emissiv
aoMapIntensitet
bumpScale
färg
skala för förskjutning
envMapIntensitet
ljusMapIntensitet
metalliskhet
grovhet
möjliga texturer:
karta
alphaMap
emissivMap
aoMap
bumpMap
envMap
förskjutningsmap
lightMap
metallnessMap
normalMap
affectedvalue:
Detta är en valfri parameter som endast behöver anges om åtgärderna addTexturePositionValue eller changeTexturePositionValue anges.
För närvarande kan x eller y anges här.
Om en textur ska förflyttas horisontellt anger man x, om den ska förflyttas vertikalt anger man y här.
t.ex: ”påverkat värde”: ”x”,
tweenValue
Det numeriska värde som den valda egenskapen ska ställas in på.
Om en texturrotationsåtgärd har valts ska den önskade rotationen anges i grader.
t.ex. rotera texturen en gång 180 grader:
”tweenValue”: 180,
json Exempel:
{
"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
}
]
}
Hämta media (pdf/video/…)
Det är möjligt att hämta ett eller flera dokument (video/mp4, pdf, jpg, png) när man klickar på ett objekt eller en knapp, som sedan visas på fliken ”Media” för hämtning.
Media måste laddas upp till servern i docs-mappen för respektive scen: /files/stages/[uuid]/docs. (Du skickar uppgifterna till din kontoansvarige på klar.land, som lagrar uppgifterna där åt dig).
”trigger_objects” utlösande objekt eller knapp
”cam” – här anges bland annat namnet på den associerade kameran och kamerans mål.
”dokument” – ett eller flera dokument att hämta
”typ” – video | bild | pdf
”uuid” – generera online på https://www.uuidgenerator.net/ och kopiera + klistra in
”playonclick” : true | false – om ett dokument ska visas direkt
Exempel – 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"
}
]
Hämta media från ”Dokument” – viktigt för flerspråkighet
Skapa först dokumenten i önskat utrymme. Detta gör du på följande sätt:
Navigera till önskat utrymme.
Välj Min dator -> Dokument.
Skapa sedan till exempel din egen mapp ”stages”, där du naturligtvis fritt kan välja namn efter dina önskemål.
Klicka på / öppna mapp.
Skapa sedan ett dokument via ”+”.
Hitta ett nyskapat fält för ett dokument och sök efter den önskade filen på din dator via ”Browser” och ladda upp den. Klicka sedan på ”Spara”.
Om du vill erbjuda filen på andra språk väljer du det önskade andra språket och sedan den önskade filen på motsvarande språk via ”File browser”. Klicka på ”Spara” igen, dokumentet är då tillgängligt på det nytillkomna språket.
Kopiera sedan ut UUID för dokumentet. Du behöver detta för att infoga det i json i steget, vilket görs där som i de andra fallen som anges ovan.
Skriptet fungerar på så sätt att om ett UUID finns kontrollerar det om det finns en matchande databaspost. Om så är fallet laddas dokumentet och visas. Om så inte är fallet tas namnet/sökvägen och motsvarande fil läses in. Detta innebär att befintliga steg inte skjuts upp.
För nya steg räcker det sedan att ange UUID och typ.
Ett exempel på en json-post med fillänkning via 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 (kvasi apngs) (för knappar)
Spritesheets, som används av apngs, definieras i gruppen”knappar”.
De png-filer som innehåller spritesheets lagras på servern i katalogen ”/files/stages/sprites”. (Om du vill använda enskilda spritesheets, vänligen lämna dem till din kontoansvarige på klar.land så kan han göra dem tillgängliga på servern).
”buttonObjectName” är namnet på 3D-objektet i scenen. Strängen ”button” bör ingå i namnet. Detta gör att objektet beter sig som en knapp. Dvs. den är alltid vänd mot kameran och när du klickar på knappen försvinner den.
”spritename” är namnet på png-filen som finns i ”/files/stages/sprites”.
”tilesHoriz” : Antal horisontella plattor
”tilesVert” : Antal vertikala brickor
”numTiles” : normalt är detta produkten av de två föregående värdena. I undantagsfall kan detta dock också vara ett annat värde (t.ex. om det finns några tomma brickor i slutet).
”tileDispDuration” : Antal millisekunder under vilka en tile ska visas.
”invisibleOnClick” : true eller false, valfritt. Anger om en knapp blir osynlig efter klickning eller inte (=false). Standardvärdet är true.
Exempel – 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"
}
],
Tonkartläggning
Du kan välja mellan 5 lägen för att justera scenens utseende genom tonmappning (postrender-effekt).
Detta kan kräva flera tester i kombination med Hdr och ljusintensiteter för att uppnå den optimala looken för respektive scen.
Om inget anges används THREE.ACESFilmicToneMapping som standard.
Exempel – JSON:
{
"Stage3dData": [
{
"tonemapping": 2,
....
tonemapping kan anta värdena 0, 1, 2, 3, 4 eller 5 – varvid
0 = THREE.NoToneMapping
1 = THREE.LinearToneMapping
2 = THREE.ReinhardToneMapping
3 = THREE.CineonToneMapping
4 = THREE.ACESFilmicToneMapping
5 = THREE.CustomToneMapping
Videotexturer
För videotexturer anges respektive namn på de 3D-objekt (”videoObject”) på vilka videotexturerna ska visas, samt den relativa sökvägen till videofilen (”videoFile”) på servern.
Videorna måste laddas upp till servern i docs-mappen för respektive scen: /files/stages/[uuid]/docs
(Samordna datalagringen med din klar.land account manager).
Exempel – JSON:
"Stage3dData" :[
{
"threedfile" : "01.glb",
"outlinelevel" : 0,
"lightsetup": 100,
"spritescale": 1,
"defaultqualitylevel": 0,
"scenetype": "3d",
"videotextures":[
{
"videoObject":"_videoplane",
"videoFile":"01/Freund_Demovideo.mp4"
}
]
}
]
”kontroller” alternativ
Olika parametrar för att ställa in zoom och avstånd för kamerorna samt musknappens tilldelning av en scen.
Exempel – 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” kan anta värdena 1 / 2 / 3. Dessa innebär
1 = Dolly (standard)
2 = ZOOM
3 = INGEN
t.ex. 3 inaktiverar zoom
”leftMouseMode” / ”middleMouseMode” / ”rightMouseMode” kan alla anta värdena 1 / 2 / 3 / 4 / 5 / 6. Dessa innebär
1 = ROTERA
2 = LASTBIL
3 = OFFSET
4 = DOLLY
5 = ZOOM
6 = INGEN
Om inget anges i JSON-koden är standardvärdena
zoomMode = Dolly
vänsterMusLäge = ROTERA
högerMouseMode = TRUCK
mittenMouseMode = DOLLY
360° stadier
(Dokumentation följer)
"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"
}
]
},
Lämna ett svar