Comment utiliser un fichier JSON pour ajouter des animations, des interactions et de nombreuses autres personnalisations à l’environnement 3D.

·

·

Pour permettre l’interaction en 3D ou pour pouvoir faire des adaptations des caméras, de l’éclairage et de quelques autres choses, il faut faire des réglages individuels via le champ de texte JSON dans la scène dans le menu admin de klar.land. Nous t’expliquons ici comment cela fonctionne en détail.

Champ de texte JSON (recommandation : créer le JSON dans un éditeur de code/texte comme notepad++ et l’insérer ici)

Un code JSON minimal peut être généré après avoir téléchargé un fichier glb en cliquant sur le bouton « Générer un json standard » (le fichier glb doit contenir au moins une caméra nommée « Defaultcam »).

Le code JSON minimal ressemble à ceci (avec cela, un stage fonctionne déjà). Ce code peut être étendu à volonté à l’aide de la documentation suivante.

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

( !) remarque importante : dans les extraits de code JSON suivants, des parenthèses peuvent parfois manquer ou les paramètres ne sont indiqués que sous une forme générale comme [number]. C’est pourquoi il est recommandé de copier ou d’adapter le code uniquement à partir de JSON de Stages qui fonctionnent.

Exigence en matière de données

Stage3dData doit être spécifié :

Construction :

"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"
    }
],

Explication :

« threedfile » : « nom de scène.glb » nom de fichier de la scène (actuellement, seul glbs est supporté)

« outlinelevel » : 0 si les objets doivent déjà recevoir leur outline (cadre bleu pour mettre en évidence les objets cliquables) lors du chargement de la scène, 1 si les objets ne doivent recevoir leur outline qu’après avoir cliqué sur le bouton.

« perspectives » : optionnel, liste des caméras qui doivent apparaître dans le menu

« lightsetup » : 0 utilise uniquement HDR, 1 utilise HDR + Point + Arealight (actuellement non implémenté)

« spritescale » : 1 l’échelle des textures de boutons,

« defaultqualitylevel » : 0 = renderpass + outlinepass + fxaapass (compromis performance + apparence), 1 = ssaapass + outlinepass (meilleur anti-aliasing, moins bonne performance)

« scenetype » : « 3d » ou « 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 » doit se terminer par cam

« lookatTarget » : « lookatobject » (si non spécifié, l’objet cliqué est utilisé comme lookattarget)

« nom » : « [Objektname Anim01] » (doit commencer par l’objet de l’animation aussi bien en glb qu’en JSON, suivi d’un espace, puis du nom unique de l’animation) // par exemple ‘rabat_haut_armature ouverte’, si un espace dans le nom de l’animation n’est pas possible pour des raisons logicielles (par exemple avec 3dsMax), il est également possible d’utiliser un caractère %.

« tc » :[number] (timecode en secondes, l’animation est lue après le temps indiqué, c’est-à-dire que c’est juste un retard de démarrage – l’animation est lue entièrement)

« loop » : true (si spécifié et true, l’animation est jouée en boucle, donc se répète)

« autoplay » : true – si une animation doit être lue automatiquement depuis le début

Explication des couches d’animation/états

Les couches d’animation sont principalement utilisées pour la surbrillance des objets et l’attribution des objets qui sont mis en valeur et sélectionnables lorsque tu cliques sur tel ou tel objet.

State est utilisé lorsqu’un objet a plusieurs états et doit jouer une animation différente selon l’état.

z. B. :

Couche d’animation 0 : ne reçoit pas de surbrillance et est utilisée pour les boutons, c’est-à-dire lorsque la caméra saute à un endroit sans interaction.

Couche d’animation 1 : S’affiche en surbrillance dès que l’objet de la couche d’animation 0 (le bouton) du groupe a été cliqué.

Couche d’animation 2 : se déclenche dès que l’objet de la couche d’animation 0 du groupe a été cliqué.

Exemple

Couche d’animation 0 : passe au tiroir 3

Couche d’animation 1 : ouvre le tiroir 3

Couche d’animation 2 : Joue l’animation du couteau cliqué qui se trouve dans le tiroir.

State 0/1 sont utilisés pour le toggle d’animation actuel :

Alors

Objet par défaut dans l’état 0, si on clique dessus, on regarde s’il a une animation avec l’état 1. Si c’est le cas, l’animation est jouée et l’objet se trouve dans l’état 1.

Si tu cliques à nouveau sur l’objet, l’animation de l’état 1 est jouée et l’objet revient à l’état 0.

Exemple

State 0 : la porte du placard à céréales s’ouvre

State 1 : La porte du placard à céréales se ferme (édité)

Plus de states que 0 et 1 et l’interrogation de ceux-ci sont actuellement prévus/en cours.

Plus de détails :

Tableau d’animations peut être inséré comme animation dans un tableau d’animations. Cette séquence d’animation peut ensuite être mise en boucle.

Couleur d’arrière-plan

Réglage de la couleur de fond :

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

En plus de rgb, la couleur de fond peut être spécifiée de la manière suivante :
« rgb(255, 0, 0) »
« rgb(100%, 0%, 0%) »
Nom de couleur X11 – les 140 noms de couleur sont supportés.
‘skyblue
//HSL string
« hsl(0, 100%, 50%) »

Hdr Lumière ambiante

Facultatif.

Si non spécifié, le hdr de studio par défaut est utilisé : /files/stages/hdr/studio_01.hdr.

Sous « hdr » –« name« , tu as la possibilité d’indiquer le nom du fichier Hdr pour ce stage. Celle-ci doit se trouver sur le serveur sous « /files/stages/hdr ». Tu dois envoyer le fichier à ton gestionnaire de compte klar.land, qui le mettra à ta disposition.

Nous proposons actuellement les HDRI standard suivants :

  • 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é de la lumière – doit être testée plusieurs fois si nécessaire.

Exemple – JSON :

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

Appeler des documents HTML en cliquant sur l’objet

Cela peut être créé dans la section documents d’un cas d’utilisation :

Exemple – 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"
      ]
    },

Appeler l’hyperlien par un clic sur l’objet

Pour cela, il faut dans un cas d’utilisation

« gotourl » : « URL » à saisir

(s’ouvre actuellement dans un nouvel onglet)

Exemple – 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
		}
	]
    }

Matériel – Animations

En principe, tu peux créer un objet de tableau materialAnimations dans n’importe quel useCase :

« materialAnimations » : [{}] Dans celui-ci, les paramètres suivants peuvent être saisis :

name: il n’y a rien à respecter ici, sauf que le nom doit être unique et ne doit pas apparaître deux fois dans le json.

action: il faut indiquer ici quel type d’animation de matériel doit être exécuté.
Les valeurs possibles sont

changeMaterialValue
addMaterialValueTween

changeTexturePositionValue
addTexturePositionValue

changeTextureRotationDegreeValue
addTextureRotationDegreeValue

stopMatérielAnimation

Pour expliquer :

La différence entre add et change est qu’avec add, les valeurs souhaitées sont ajoutées aux anciennes valeurs du matériau, tandis qu’avec change, les valeurs actuelles sont modifiées pour correspondre aux valeurs indiquées.
Ceci est particulièrement pertinent pour les loops.

Si tu veux qu’une texture se déplace vers la droite sur l’axe x par exemple, tu peux utiliser changeTexturePositionValue, par exemple de 0 à 2. Si tu indiques ensuite que cela doit être exécuté en boucle, la texture se déplacera de la position x=0 à x=2. Mais lors de la deuxième exécution de la boucle, la texture ne bougerait plus, car même si elle est déplacée sur x=2, elle est déjà à cette position.

Si tu veux augmenter la valeur de 1 à chaque passage de boucle, tu dois utiliser l’action « add » correspondante. Il est ainsi possible d’ajuster les valeurs des matériaux, mais aussi de faire pivoter ou de déplacer les textures. StopMaterialAnimation permet d’arrêter les animations de matériel en cours. C’est pertinent par exemple pour les animations qui sont dans une boucle infinie et qui doivent être stoppées.

Boucle

Il s’agit d’un paramètre facultatif.

Si elle n’est pas définie, materialAnimation sera exécutée une seule fois.
Si ce paramètre est défini et a la valeur 0 ou true, il est bouclé à l’infini.
Si une valeur numérique est indiquée ici, l’animation sera bouclée autant de fois qu’indiqué dans la valeur.
loop = 12 fait que l’animation de la matière est répétée exactement 12 fois.

start_tc :
end_tc :

Ici, on définit l’heure de début et de fin de l’animation en secondes (les chiffres après la virgule sont possibles).
start_tc indique quand l’animation de la matière doit commencer après l’exécution de l’UseCase.

start_tc = 2 l’animation démarre avec 2 secondes de retard, avec start_tc = 0 l’animation démarre immédiatement.
end_tc indique quand l’animation doit s’arrêter.

La combinaison des deux valeurs détermine la vitesse à laquelle l’animation doit être exécutée. Plus start_tc et end_tc sont proches l’un de l’autre, plus l’animation se déroule rapidement.

materialName:Il faut indiquer ici le nom du matériau qui doit être animé.

materialproperty:détermine quelle propriété/texture du matériau doit être influencée.

matériel possibleCaractéristiques :

opacity
emissiveIntensity
émissif
aoMapIntensity
bumpScale
color
displacementScale
envMapIntensity
lightMapIntensity
metalness
roughness

textures possibles :

map
alphaMap
emissiveMap
aoMap
bumpMap
envMap
displacementMap
lightMap
metalnessMap
normalMap

affectedvalue :
Il s’agit d’un paramètre facultatif qui ne doit être spécifié que si les actions addTexturePositionValue ou changeTexturePositionValue sont spécifiées.
Ici, il est possible d’indiquer actuellement x ou y.
Si tu veux qu’une texture se déplace horizontalement, tu dois indiquer x, et si tu veux qu’elle se déplace verticalement, tu dois indiquer y ici.
par exemple : « affectedvalue » : « x »,

tweenValue
La valeur numérique à laquelle la propriété sélectionnée doit être définie.
Si une action de rotation de texture est sélectionnée, la rotation souhaitée doit être indiquée en degrés.
Par exemple, tourner la texture une fois de 180 degrés :
« tweenValue » : 180,

json exemple :

{
  "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
    }
  ]
}

Consulter les médias (pdfs/vidéos/…)

Vidéo déclenchée par un clic sur un bouton ou un objet

Il est possible, en cliquant sur un objet ou un bouton, de récupérer un ou plusieurs documents (vidéo/mp4, pdf, jpg, png) qui apparaissent ensuite dans l’onglet « Médias » pour être récupérés.

Les médias doivent être téléchargés sur le serveur dans le dossier docs de chaque stage : /files/stages/[uuid]/docs. (Tu transmettras ces données à ton gestionnaire de compte klar.land, qui les y déposera pour toi).

« trigger_objects » objet déclencheur ou bouton

« cam » – ici, on indique entre autres le nom de la caméra associée et de la cible de la caméra

« documents » – un ou plusieurs documents à récupérer

« type » – vidéo | image | pdf

« uuid » – générer en ligne sous https://www.uuidgenerator.net/ et copier + coller

« playonclick » : true | false – si un document doit apparaître directement

Exemple – 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"
}
]

 

Accéder aux médias depuis les « documents » – important pour le multilinguisme

Dans l’espace souhaité, crée d’abord les documents. Voici comment faire :

Naviguer vers l’espace souhaité.
Là, sélectionner Poste de travail -> Docs.
Ensuite, crée par exemple ton propre dossier « stages », ici tu peux bien sûr choisir librement le nom selon tes préférences.
Cliquer sur le dossier / l’ouvrir
Puis créer un document via le « + ».
Chercher un champ nouvellement créé pour un document et y chercher via « navigateur » le fichier souhaité sur ton ordinateur et le télécharger. Puis cliquer sur « Enregistrer ».
Si tu souhaites proposer le fichier dans d’autres langues, sélectionne ensuite l’autre langue souhaitée et ensuite, via le « navigateur de fichiers », le fichier souhaité dans la langue correspondante. Clique à nouveau sur « Enregistrer », le document sera alors disponible dans la nouvelle langue ajoutée.

Ensuite, tu copies l’UUID du document. Tu en as besoin pour les insérer dans le json de la scène, qui se fait là comme dans les autres cas cités ci-dessus.


Le script fonctionne de la manière suivante : si un UUID est présent, il vérifie si une entrée de base de données correspondante existe. Si c’est le cas, le document sera chargé et affiché. Si ce n’est pas le cas, le nom/chemin est pris et le fichier correspondant est chargé. Cela permet de ne pas écraser les stages existants.

Pour les nouveaux stages, il suffit alors d’indiquer l’UUID et le type.

Un exemple d’entrée json avec un lien de fichier via l’UUID Doc :

"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) (pour les boutons)

Boutons dans une scène, animés par des feuilles de sprites

Les spritesheets, comme ceux utilisés par apngs, sont définis dans le groupe « boutons« .

Les fichiers png qui contiennent les spritesheets sont placés sur le serveur dans le répertoire « /files/stages/sprites ». (Dans la mesure où tu souhaites utiliser des spritesheets individuels, mets-les à disposition de ton gestionnaire de compte klar.land et il pourra ensuite les mettre à disposition sur le serveur).

« buttonObjectName » est le nom de l’objet 3D dans la scène. La chaîne de caractères « bouton » doit être incluse dans le nom. Cela permet à l’objet de se comporter comme un bouton. C’est-à-dire qu’il sera toujours orienté vers la caméra et qu’en cliquant, le bouton disparaîtra.

« spritename » est le nom du fichier png qui se trouve dans « /files/stages/sprites ».

« tilesHoriz » : nombre de tuiles horizontales

« tilesVert » : nombre de tuiles verticales

« numTiles » : normalement, il s’agit du produit des deux valeurs précédentes. Mais cela peut être une autre valeur dans des cas exceptionnels (par exemple s’il y a quelques tuiles vides à la fin).

« tileDispDuration » : nombre de millisecondes pendant lesquelles une tuile doit être affichée

« invisibleOnClick » : oui ou non, facultatif. Indique si un bouton devient invisible ou non après avoir été cliqué (=false). La valeur par défaut est true.

Exemple – 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"
}		
],

Mappage du son

Tu peux choisir parmi 5 modes pour ajuster le look de la scène grâce au mapping tonal (effet de post-rendu).

Cela peut nécessiter plusieurs tests en combinaison avec le Hdr et les intensités de lumière afin d’obtenir le look optimal pour chaque scène.

Si rien n’est spécifié, THREE.ACESFilmicToneMapping est utilisé par défaut.

Exemple – JSON :

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

tonemapping peut prendre les valeurs 0, 1, 2, 3, 4 ou 5 – où

0 = THREE.NoToneMapping

1 = THREE.LinearToneMapping

2 = THREE.ReinhardToneMapping

3 = THREE.CineonToneMapping

4 = THREE.ACESFilmicToneMapping

5 = THREE.CustomToneMapping

Appartement Stage avec ReinhardToneMapping / « tonemapping » : 2

Appartement Stage avec ACESFilmicToneMapping / « tonemapping » : 4 ou aucune indication

Textures vidéo

Textures vidéo dans un stage

Pour les textures vidéo, on indique les noms respectifs des objets 3D (« videoObject« ) sur lesquels les textures vidéo doivent apparaître, ainsi que le chemin relatif vers le fichier vidéo (« videoFile« ) sur le serveur.

Les vidéos doivent être téléchargées sur le serveur dans le dossier docs de chaque stage : /files/stages/[uuid]/docs

(Conviens de l’archivage des données avec ton gestionnaire de compte klar.land).

Exemple – JSON :

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

« Options de contrôle

Divers paramètres pour régler le zoom et la distance des caméras ainsi que l’affectation des boutons de la souris d’un stage.

Exemple – 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 » peut prendre les valeurs 1 / 2 / 3. Ceux-ci signifient

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

c’est-à-dire que 3 désactive le zoom

« leftMouseMode » / « middleMouseMode » / « rightMouseMode » peuvent respectivement prendre les valeurs 1 / 2 / 3 / 4 / 5 / 6. Ceux-ci signifient

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

Si rien n’est spécifié dans le code JSON, les valeurs par défaut sont

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

Stages à 360

(Documentation à venir)

"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"
}
]
},

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *