For å muliggjøre 3D-interaksjon eller for å kunne gjøre justeringer av kameraer, belysning og mye mer, må individuelle innstillingsmuligheter gjøres ved hjelp av JSON-tekstfeltet i scenen i klar.land admin-menyen. Vi forklarer hvordan dette fungerer i detalj her.
En minimal JSON-kode kan genereres etter å ha lastet opp en glb-fil ved å bruke «Generer standard json»-knappen (glb-filen må inneholde minst ett kamera med navnet «Defaultcam»).
Minimal JSON-kode ser slik ut (et trinn fungerer allerede med dette). Denne koden kan utvides etter ønske ved hjelp av følgende dokumentasjon.
{ "Stage3dData" :[ { "threedfile" : "Dateiname.glb", "outlinelevel" : 0, "lightsetup": 0, "spritescale": 1, "defaultqualitylevel": 0, "scenetype": "_3d" } ] }
(!) viktig merknad: følgende JSON-kodebiter kan noen ganger mangle parenteser eller parametere er bare i generell form som[number] spesifisert. Derfor anbefales det kun å kopiere eller tilpasse kode fra fungerende JSON-er fra stadier.
Forespørsel om data
Stage3dData må spesifiseres:
Konstruksjon:
"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" } ],
Forklaring:
» threedfile » : «scenename.glb» filnavn på scenen (for øyeblikket støttes kun glbs)
» outlinelevel » : 0 hvis objekter skal motta omrisset (blå ramme for å markere klikkbare objekter) når du laster en scene, 1 hvis objekter bare skal motta omrisset etter å ha klikket på knappen.
» perspektiver «: valgfritt, liste over kameraer som skal vises i menyen
» lightsetup «: 0 bruker bare HDR, 1 bruker HDR + Point + Arealight (foreløpig ikke implementert)
» spritescale » : 1 skaleringen av knappens teksturer,
» defaultqualitylevel » : 0 = renderpass + outlinepass + fxaapass (ytelse + utseende tradeoff), 1 = ssaapass + outlinepass (bedre kantutjevnelse, dårligere ytelse)
» scenetype » : «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å ende på cam
» lookatTarget » : «lookatobject» (hvis ikke spesifisert, brukes det klikkede objektet som lookattarget)
» navn » : «[Objektname Anim01] » (må starte med animasjonsobjektet i både glb og JSON, etterfulgt av et mellomrom og deretter det unike animasjonsnavnet) // f.eks. ‘klappe_aufen_Armature auf’, hvis det ikke er plass i animasjonsnavnet på grunn av programvareårsaker (f.eks. med 3dsMax ). er mulig, et % -tegn kan også brukes
» tc «:[number] (tidskode i sekunder, animasjonen spilles av etter den angitte tiden, det vil si at det bare er en forsinkelse i starten – animasjonen spilles av helt)
» loop » : true (hvis spesifisert og sann vil animasjonen spilles av som en loop, dvs. gjentakende)
» autoplay » : sant – hvis en animasjon skal spilles av automatisk fra begynnelsen
Forklaring av animasjonslag/tilstander
Animasjonslag brukes først og fremst til å fremheve objekter og tilordne hvilke objekter som er uthevet og valgbare når du klikker på hvilke objekter.
Tilstand brukes når et objekt har flere tilstander og skal spille en annen animasjon avhengig av tilstanden.
f.eks. F.eks.:
Animasjonslag 0: Får ingen fremheving og brukes til knappene, dvs. når kameraet hopper til et sted uten interaksjon.
Animasjonslag 1: Utheves så snart animasjonslag 0-objektet (knappen) til gruppen har blitt klikket.
Animasjonslag 2: Utheves så snart objektet til animasjonslag 0 i gruppen klikkes.
Eksempel:
Animasjonslag 0: hopp til skuff 3
Animasjonslag 1: åpen skuff 3
Animasjonslag 2: Spill animasjon av klikket kniv, som ligger i skuffen.
Status 0/1 brukes for øyeblikket for animasjonsveksling:
Så:
Objektet er som standard i tilstand 0. Hvis du klikker på det, vil du se om det har en animasjon med tilstand 1. Hvis dette er tilfelle, spilles animasjonen og objektet er i tilstand 1.
Hvis du klikker på den igjen, vil tilstand 1-animasjonen spilles av, og objektet vil bli returnert til tilstand 0.
Eksempel:
Tilstand 0: Kornskapsdør åpnes
Tilstand 1: Kornskapsdør lukkes (redigert)
Flere tilstander enn 0 og 1 og spørringen av disse er for øyeblikket planlagt/pågår.
Mer informasjon:
Animasjonsarray kan settes inn i en animasjonsmatrise som en animasjon. Denne animasjonssekvensen kan deretter loopes.
Bakgrunnsfarge
Innstilling for bakgrunnsfarge:
{ "Stage3dData": [ { "backgroundColor": "rgb(81, 87, 99)", .....
I tillegg til RGB kan bakgrunnsfargen også spesifiseres som følger:
«rgb(255, 0, 0)»
«rgb(100%, 0%, 0%)»
X11 fargenavn – alle 140 fargenavn støttes.
‘himmelblå’
//HSL-streng
«hsl(0, 100%, 50%)»
HDR omgivelseslys
Valgfri.
Hvis ikke spesifisert, vil standard studio hdr bli brukt: /files/stages/hdr/studio_01.hdr.
Under » hdr » – » navn » har du muligheten til å spesifisere filnavnet til HDR-filen for dette stadiet. Denne må ligge på serveren under «/files/stages/hdr». Send filen til din klar.land-kontoansvarlig, som vil gjøre den tilgjengelig for deg der.
Vi tilbyr for tiden følgende standard HDRI:
- adams_place_brigde_1k.hdr
- autoshop_01_1k.hdr
- comfy_cafe_1k.hdr
- gradient_01.hdr
- hotellrom_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
- hvit.hdr
» intensitet «: intensiteten til lyset – må kanskje testes flere ganger.
Eksempel – JSON:
"Stage3dData" :[ { "threedfile" : "muellmaschiene.glb", "outlinelevel" : 0, "lightsetup": 0, "hdr":{ "name":"venice_sunset_1k.hdr", "intensity": 3 }, "spritescale": 1, "defaultqualitylevel": 0, "scenetype": "3d",
Åpne HTML-dokumenter via objektklikk
Dette kan opprettes i dokumentområdet i en brukssak:
Eksempel – 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" ] },
Åpne hyperkobling via objektklikk
Dette må gjøres i et brukstilfelle
«gotourl»: «URL» må angis
(åpnes for øyeblikket i ny fane)
Eksempel – Bruksområde:
{ "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 } ] }
Materiale – animasjoner
I utgangspunktet kan du lage et materialAnimations array-objekt i en hvilken som helst useCase:
» materialAnimations «: [{}] Følgende parametere kan legges inn i denne:
navn : Ingenting må tas i betraktning her bortsett fra at navnet er unikt og ikke vises en gang til i json.
handling : her må du spesifisere hva slags materialanimasjon som skal utføres.
Mulige verdier er:
endreMaterialValue
addMaterialValueTween
changeTexturePositionValue
addTexturePositionValue
changeTextureRotationDegreeValue
addTextureRotationDegreeValue
stopMaterialAnimation
For forklaring:
Forskjellen mellom legg til og endring er at med legg legges de ønskede verdiene til de gamle materialverdiene, med endring endres gjeldende verdier til de angitte verdiene.
Dette er spesielt relevant for løkker.
For eksempel, hvis du vil at en tekstur skal flyttes til høyre på x-aksen, kan du bruke changeTexturePositionValue, for eksempel fra 0 til 2. Hvis du da spesifiserte at dette skulle utføres som en sløyfe, ville teksturen flyttet fra posisjonen x=0 til x =2 trekk. Den andre gangen løkken ble kjørt, ville imidlertid ikke teksturen bevege seg lenger fordi den ble flyttet til x=2, men allerede var i den posisjonen.
Så hvis du ønsker å øke verdien med 1 per sløyfekjøring, bør du bruke passende «legg til»-handling. Dette gjør det mulig å justere materialverdier samt rotere eller flytte teksturer. StopMaterialAnimation kan brukes til å stoppe kjøring av materialanimasjoner. Dette er for eksempel relevant for animasjoner som er i en uendelig loop og bør stoppes.
loop :
Dette er en valgfri parameter.
Hvis den ikke er satt, kjøres materialAnimasjonen én gang.
Hvis denne parameteren er satt og har verdien 0 eller sann, vil den sløyfes i det uendelige.
Hvis en numerisk verdi er spesifisert her, vil animasjonen gå i loop så ofte som angitt i verdien.
loop = 12 gjør at materialanimasjonen gjentas nøyaktig 12 ganger.
start_tc:
end_tc:
Her er start- og sluttid for animasjonen definert i sekunder (desimaler er mulig).
start_tc spesifiserer når materialanimasjonen skal starte etter utføring av UseCase.
start_tc = 2 starter animasjonen 2 sekunder forsinket, med start_tc = 0 starter animasjonen umiddelbart.
end_tc indikerer når animasjonen skal stoppe.
Kombinasjonen av begge verdiene bestemmer hvor raskt animasjonen skal kjøre. Jo nærmere start_tc og end_tc er hverandre, jo raskere vil animasjonen spilles av.
materialName : Navnet på materialet som skal animeres må angis her.
materialproperty : bestemmer hvilken materialegenskap/tekstur som skal påvirkes.
mulige materialegenskaper:
opasitet
emissiv intensitet
emitterende
aoMapIntensity
bumpScale
farge
forskyvningsskala
envMapIntensity
lysKartintensitet
metallhet
ruhet
mulige teksturer:
kart
alphaMap
emissiveMap
aoMap
bumpMap
envMap
forskyvningskart
lysKart
metallnessKart
normalt kart
påvirket verdi:
Dette er en valgfri parameter som bare må spesifiseres når du spesifiserer handlingene addTexturePositionValue eller changeTexturePositionValue.
Du kan for øyeblikket spesifisere x eller y her.
Hvis du vil at en tekstur skal bevege seg horisontalt, skriver du inn x; hvis du vil at den skal bevege seg vertikalt, skriver du inn y her.
f.eks.: «affectedvalue»: «x»,
tweenValue
Den numeriske verdien som den valgte egenskapen skal settes til.
Hvis en teksturrotasjonshandling er valgt, bør ønsket rotasjon angis i grader.
for eksempel roter teksturen én gang 180 grader:
«tweenValue»: 180,
json eksempel:
{ "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 } ] }
Få tilgang til media (pdfs/videoer/…)
Det er mulig å hente ett eller flere dokumenter (video/mp4, pdf, jpg, png) ved å klikke på et objekt eller en knapp, som så vises i fanen «Media» for gjenfinning.
Mediet må lastes inn på serveren i docs-mappen på det respektive trinnet: /files/stages/[uuid] /docs. (Du sender dataene til din klar.land-kontoansvarlige, som vil lagre dataene der for deg.)
» trigger_objects » utløser objekt eller knapp
“ cam ” – navnet på det tilknyttede kameraet og kameramålet spesifiseres blant annet her
» dokumenter » – ett eller flere dokumenter å hente
» type » – video | bilde | pdf
» uuid » – generer online på https://www.uuidgenerator.net/ og kopier + lim inn
» playonclick » : sant | falsk – hvis et dokument skal vises direkte
Eksempel – 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" } ]
Ring opp media fra «Dokumentene» – viktig for flerspråklighet
Lag først dokumentene på ønsket plass. Dette gjør du som følger:
Naviger til ønsket plass.
Der under arbeidsplassen -> Velg Dokumenter.
Lag deretter for eksempel din egen mappe «stadier», her kan du selvfølgelig fritt velge navnet etter dine preferanser.
Klikk/åpne mappe.
Bruk deretter «+» for å lage et dokument.
Søk etter et nyopprettet felt for et dokument og bruk deretter «Browser» for å søke etter ønsket fil på datamaskinen din og laste den opp. Klikk deretter «Lagre».
Hvis du ønsker å tilby filen på andre språk, velg deretter ønsket annet språk og bruk deretter «filleseren» for å velge ønsket fil på det tilsvarende språket. Klikk på «Lagre» igjen og dokumentet vil da være tilgjengelig på det nylig lagt til språket.
Kopier deretter UUID-en til dokumentet. Du trenger dette for å sette det inn i json i scenen, noe som gjøres der som i de andre tilfellene som er oppført ovenfor.
Måten skriptet fungerer på er at hvis en UUID er til stede, sjekker det om det finnes en matchende databaseoppføring. I så fall vil dokumentet lastes og vises. Hvis dette ikke er tilfelle, tas navnet/banen og den tilsvarende filen lastes. Det betyr at eksisterende scener ikke blir ødelagt.
For nye stadier er det tilstrekkelig å spesifisere UUID og type.
Et eksempel på en json-oppføring med filkobling 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" ] }, ]
Sprite-ark (kvasi apngs) (for knapper)
Spriteark, som apngs, er definert i knappene- gruppen.
Png-filene som inneholder sprite-arkene er lagret på serveren i katalogen «/files/stages/sprites». (Hvis du ønsker å bruke individuelle sprite-ark, gjør dem tilgjengelige for klar.land-kontoadministratoren din, og han kan deretter gjøre dem tilgjengelige på serveren.)
» buttonObjectName » er navnet på 3D-objektet i scenen. Strengen «knapp» skal være inkludert i navnet. Dette får objektet til å oppføre seg som en knapp. dvs. den vil alltid være på linje med kameraet, og når du klikker på knappen forsvinner den.
» spritename » er navnet på png-filen som ligger i «/files/stages/sprites».
» tilesHoriz » : Antall horisontale fliser
» tilesVert » : Antall vertikale fliser
» numTiles «: vanligvis er dette produktet av de to foregående verdiene. Men i unntakstilfeller kan dette også være en annen verdi (f.eks. hvis det er noen tomme fliser på slutten).
» tileDispDuration » : Antall millisekunder som en brikke skal vises for
» invisibleOnClick » : sant eller usant, valgfritt. Angir om en knapp blir usynlig etter klikk eller ikke (=false). Standard er sant.
Eksempel – 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
Du kan velge mellom 5 moduser for å justere scenens utseende gjennom tonekartlegging (effekt etter gjengivelse).
Dette kan kreve flere tester i kombinasjon med HDR og lysintensiteter for å oppnå det optimale utseendet for den respektive scenen.
Hvis ingenting er spesifisert, brukes THREE.ACESFilmicToneMapping som standard.
Eksempel – JSON:
{ "Stage3dData": [ { "tonemapping": 2, ....
tonemapping kan ta verdiene 0, 1, 2, 3, 4 eller 5 – hvor er
0 = THREE.NoToneMapping
1 = THREE.LinearToneMapping
2 = THREE.ReinhardToneMapping
3 = THREE.CineonToneMapping
4 = THREE.ACESFilmicToneMapping
5 = THREE.CustomToneMapping
Videoteksturer
For videoteksturer spesifiseres de respektive navnene på 3D-objektene (» videoObject «) som videoteksturene skal vises på, samt den relative banen til videofilen (» videoFile «) på serveren.
Videoene må lastes inn på serveren i docs-mappen på det respektive trinnet: /files/stages/[uuid] /docs
(Koordiner datalagringen med din klar.land-kontoansvarlig.)
Eksempel – JSON:
"Stage3dData" :[ { "threedfile" : "01.glb", "outlinelevel" : 0, "lightsetup": 100, "spritescale": 1, "defaultqualitylevel": 0, "scenetype": "3d", "videotextures":[ { "videoObject":"_videoplane", "videoFile":"01/Freund_Demovideo.mp4" } ] } ]
«kontroller» alternativer
Ulike parametere for å stille inn zoom og avstand til kameraene samt museknapptildelingen til en scene.
Eksempel – 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 ta verdiene 1/2/3. Disse betyr
1 = Dolly (standard)
2 = ZOOM
3 = INGEN
dvs. 3 deaktiverer zoom
«leftMouseMode» / «middleMouseMode» / «rightMouseMode» kan hver ta verdiene 1 / 2 / 3 / 4 / 5 / 6. Disse betyr
1 = ROTERE
2 = LASTBIL
3 = OFFSET
4 = DOLLY
5 = ZOOM
6 = INGEN
Hvis ingenting er spesifisert i JSON, er standardverdiene
zoomMode = Dolly
leftMouseMode = ROTERE
rightMouseMode = LASTBIL
middleMouseMode = DOLLY
360° trinn
(Dokumentasjon følger)
"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" } ] },
Legg igjen en kommentar