Cómo añadir animaciones, interacciones y muchas otras personalizaciones al entorno 3D con un archivo JSON.

·

·

Para permitir la interacción en 3D o poder realizar ajustes en las cámaras, la iluminación y algunas cosas más, las opciones de ajuste individuales deben realizarse a través del campo de texto JSON del escenario en el menú de administración de klar.land. Aquí te explicamos en detalle cómo funciona.

Campo de texto JSON (recomendación: crea el JSON en un editor de código/texto como, por ejemplo, notepad++ y pégalo aquí)

Se puede generar un código JSON mínimo tras subir un archivo glb pulsando el botón «Generarjsonpordefecto» (el archivo glb debe contener al menos una cámara con el nombre «Defaultcam»).

El código JSON mínimo tiene este aspecto (una etapa ya funciona con esto). Este código puede ampliarse como se desee utilizando la siguiente documentación.

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

(!) nota importante: en los siguientes fragmentos de código JSON, en algunos casos pueden faltar corchetes o los parámetros sólo se especifican en forma general, como [number]. Por lo tanto, se recomienda copiar o adaptar el código sólo de los JSON de las etapas que funcionen.

Requisito de datos

Hay que especificar Stage3dData:

Estructura:

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

Explicación:

«threedfile» : «szenenname.glb» Nombre de archivo de la escena (actualmente sólo admite glbs)

«outlinelevel» : 0 si los objetos deben recibir ya el contorno (marco azul para resaltar los objetos clicables) al cargar la escena, 1 si los objetos sólo deben recibir su contorno tras pulsar el botón.

«perspectivas» : opcional, listado de cámaras que aparecerán en el menú

«lightsetup» : 0 utiliza sólo HDR, 1 utiliza HDR + Punto + Arealight (actualmente no implementado)

«spritescale» : 1 la escala de las texturas de los botones,

«defaultqualitylevel» : 0 = renderpass + outlinepass + fxaapass (compromiso de rendimiento + aspecto), 1 = ssaapass + outlinepass (mejor antialiasing, peor rendimiento)

«tipo de escena» : «3d» o «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» debe terminar en cam

«lookatTarget» : «lookatobject» (si no se especifica, se utiliza el objeto pulsado como lookattarget)

«name» : «[Objektname Anim01]» (debe comenzar con el objeto de animación tanto en glb como en JSON, seguido de un espacio y a continuación el nombre único de la animación) // por ejemplo, ‘flap_up_armature open’, si no es posible incluir un espacio en el nombre de la animación debido al software (por ejemplo, con 3dsMax), también se puede utilizar un carácter %.

«tc» :[number] (código de tiempo en segundos, la animación se reproduce después del tiempo especificado, es decir, es sólo un retraso del inicio – la animación se reproduce completamente)

«bucle» : verdadero (si se especifica y es verdadero, la animación se reproduce como un bucle, es decir, se repite)

«reproducción automática» : true – si una animación debe reproducirse automáticamente desde el principio

Explicación de las capas/estados de animación

Las capas de animación se utilizan principalmente para resaltar objetos y asignar qué objetos se resaltan y se pueden seleccionar al hacer clic sobre qué objetos.

Estado se utiliza cuando un objeto tiene varios estados y debe reproducir una animación diferente según el estado.

z. B.:

Capa de animación 0: No recibe ningún resalte y se utiliza para los botones, es decir, cuando la cámara salta a un lugar sin interacción.

Capa de animación 1: Se resalta en cuanto se pulsa el objeto de la capa de animación 0 (el botón) del grupo.

Capa de animación 2: Se gehighlita en cuanto se pulsa el objeto de la capa de animación 0 del grupo.

Ejemplo:

Capa de animación 0: saltar al cajón 3

Capa de animación 1: abre el cajón 3

Capa de animación 2: Reproduce la animación del cuchillo pulsado, que está en el cajón.

Los estados 0/1 se utilizan actualmente para alternar animaciones:

Entonces:

Objeto en estado 0 por defecto, si se pulsa, se comprueba si tiene una animación con estado 1. Si es así, se reproduce la animación y el objeto se encuentra en el estado 1.

Si ahora se vuelve a pulsar, se reproduce la animación del estado 1 y el objeto vuelve al estado 0.

Ejemplo:

Estado 0: Se abre la puerta del armario de los cereales

Estado 1: La puerta del armario de los cereales se cierra (editado)

Actualmente se está planificando/realizando la interrogación de más estados además de 0 y 1.

Para más información:

La matriz de animaciones se puede insertar como animación en una matriz de animación. Esta secuencia de animación puede reproducirse en bucle.

Color de fondo

Configurar el color de fondo:

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

Además de rgb, el color de fondo se puede especificar de la siguiente manera:
«rgb(255, 0, 0)»
«rgb(100%, 0%, 0%)»
Nombre de color X11 – se admiten los 140 nombres de color.
azul cielo
Cadena //HSL
«hsl(0, 100%, 50%)»

Luz ambiente hdr

Opcional.

Si no se especifica, se utiliza el hdr de estudio por defecto: /files/stages/hdr/studio_01.hdr.

En«hdr» –«nombre» tienes la opción de especificar el nombre del archivo Hdr para esta etapa. Debe estar ubicado en el servidor en «/files/stages/hdr». Envía el archivo a tu gestor de cuenta de klar.land, que lo pondrá a tu disposición allí.

Actualmente ofrecemos las siguientes HDRI estándar:

  • adams_place_brigde_1k.hdr
  • autoshop_01_1k.hdr
  • comfy_cafe_1k.hdr
  • degradado_01.hdr
  • hab_hotel_1k.hdr
  • shanghai_bund_1k.hdr
  • claraboya_garaje_1k.hdr
  • estudio_01.hdr
  • estudio_01_heller.hdr
  • estudio_pequeño_06_1k.hdr
  • estudio_pequeño_08_1k.hdr
  • atardecer_venice_1k.hdr
  • blanco.hdr

«intensidad» : intensidad de la luz – puede que haya que probarla varias veces.

Ejemplo – JSON:

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

Llamada a documentos HTML mediante clic de objeto

Se puede crear en el área de documentos dentro de un caso de uso:

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

Llamar a un hiperenlace por clic de objeto

Para ello, en un caso práctico

«gotourl» : «URL» debe ser introducido

(actualmente se abre en una nueva pestaña)

Ejemplo – Caso de uso:

  {
	"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 – Animaciones

Básicamente, puedes crear un objeto MaterialAnimations Array en cualquier useCase:

«materialAnimations«: [{}] En él se pueden introducir los siguientes parámetros:

nombre: aquí no hay que tener en cuenta nada, salvo que el nombre sea único y no aparezca una segunda vez en el json.

acción: aquí debes especificar qué tipo de animación material se va a realizar.
Los valores posibles son:

cambiarValorMaterial
addMaterialValueTween

cambiarValorPosiciónTextura
addTexturePositionValue

cambiarValorGradoRotaciónTextura
addTextureRotationDegreeValue

stopAnimaciónMaterial

A modo de explicación:

La diferencia entre añadir y cambiar es que con añadir los valores deseados se añaden a los valores antiguos del material, con cambiar los actuales se cambian por los valores especificados.
Esto es especialmente relevante para los bucles.

Por ejemplo, si una textura debe moverse hacia la derecha en el eje x, se podría utilizar changeTexturePositionValue, por ejemplo, de 0 a 2. Si luego se especifica que esto debe hacerse como un bucle, la textura se movería de la posición x=0 a x=2. Sin embargo, cuando se ejecuta el bucle por segunda vez, la textura ya no se movería porque se desplaza a x=2, pero ya está en esa posición.

Si quieres aumentar el valor en 1 por cada ejecución del bucle, debes utilizar la acción «añadir» adecuada. Esto permite ajustar los valores del material, así como rotar o mover las texturas. Con stopMaterialAnimation se pueden detener las MaterialAnimations en ejecución. Esto es relevante, por ejemplo, para animaciones que están en un bucle infinito y deben detenerse.

Bucle:

Es un parámetro opcional.

Si no se establece, el materialAnimación se ejecuta una vez.
Si este parámetro está activado y tiene el valor 0 o verdadero, se realiza un bucle infinito.
Si se introduce aquí un valor numérico, la animación se repite tantas veces como se especifique en el valor.
bucle = 12 hace que la animación del material se repita exactamente 12 veces.

inicio_tc:
fin_tc:

Aquí se define el tiempo de inicio y fin de la animación en segundos (es posible utilizar decimales).
start_tc indica cuándo debe comenzar la animación del material una vez ejecutado el UseCase.

start_tc = 2 la animación comienza con 2 segundos de retraso, con start_tc = 0 la animación comienza inmediatamente.
end_tc indica cuándo debe detenerse la animación.

La combinación de ambos valores determina la velocidad de ejecución de la animación. Cuanto más cerca estén start_tc y end_tc, más rápido se reproducirá la animación.

materialName:Aquí debe especificarse el nombre del material que se va a animar.

propiedadmaterial:determina en qué propiedad/textura del material se va a influir.

posible materialPropiedades:

opacidad
intensidademisiva
emisivo
aoMapaIntensidad
bumpScale
color
desplazamientoEscala
envMapIntensidad
lightMapIntensity
metalness
rugosidad

posibles texturas:

mapa
alfaMapa
mapaemisivo
aoMapa
bumpMap
envMap
desplazamientoMapa
lightMap
metalnessMap
normalMapa

afectadovalor:
Se trata de un parámetro opcional que sólo es necesario especificar si se especifican las acciones añadirValorDePosiciónDeTextura o cambiarValorDePosiciónDeTextura.
Actualmente se puede especificar aquí x o y.
Si una textura se va a mover horizontalmente, se introduciría x, si se va a mover verticalmente, se introduciría y aquí.
por ejemplo «valorafectado»: «x»,

tweenValue
El valor numérico al que debe ajustarse la propiedad seleccionada.
Si se selecciona una acción de rotación de la textura, la rotación deseada debe especificarse en grados.
Por ejemplo, gira una vez la textura 180 grados:
«tweenValue»: 180,

json Ejemplo:

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

Llama a los medios de comunicación (pdfs/vídeos/…)

Vídeo activado al pulsar un botón o un objeto

Es posible recuperar uno o más documentos (vídeo/mp4, pdf, jpg, png) al hacer clic en un objeto o botón, que luego aparecen en la pestaña «Medios» para su recuperación.

Los soportes deben subirse al servidor en la carpeta docs de la etapa correspondiente: /files/stages/[uuid]/docs. (Envías los datos al gestor de tu cuenta en klar.land, que los almacena allí por ti).

«objetos_disparadores» objeto o botón disparador

«cam» – aquí se especifican, entre otras cosas, el nombre de la cámara asociada y el objetivo de la cámara.

«documentos» – uno o más documentos a recuperar

«tipo»– vídeo | imagen | pdf

«uuid» – generar en línea en https://www.uuidgenerator.net/ y copiar + pegar

«playonclick» : true | false – si el documento debe aparecer directamente

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

 

Llamar a los medios de comunicación desde los «Documentos» – importante para el multilingüismo

Primero crea los documentos en el espacio deseado. Hazlo de la siguiente manera:

Navega hasta el espacio deseado.
Selecciona Mi PC -> Docs.
Luego, por ejemplo, crea tu propia carpeta «etapas», aquí puedes, por supuesto, elegir libremente el nombre según tus preferencias.
Haz clic en / abrir carpeta.
A continuación, crea un documento mediante el «+».
Busca un campo recién creado para un documento y busca el archivo deseado en tu ordenador a través del «Navegador» y súbelo. Luego haz clic en «Guardar».
Si quieres ofrecer el archivo en otros idiomas, selecciona el otro idioma deseado y luego el archivo deseado en el idioma correspondiente a través del «Buscador de archivos». Vuelve a hacer clic en «Guardar», y el documento estará disponible en la nueva lengua añadida.

A continuación, copia el UUID del documento. Lo necesitas para insertarlo en el json de la etapa, lo que se hace allí como en los otros casos anteriores.


El script funciona de tal forma que si existe un UUID, comprueba si existe una entrada de base de datos que coincida. Si es así, el documento se carga y se muestra. Si no lo es, se toma el nombre/ruta y se carga el archivo correspondiente. Esto significa que no se disparan las etapas existentes.

Para las etapas nuevas, basta con introducir el UUID y el tipo.

Un ejemplo de entrada json con enlace a archivo mediante el UUID del 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 (casi apngs) (para botones)

Botones de un escenario que se animan mediante hojas de sprites

Las hojas de sprites, tal y como las utiliza apngs, se definen en el grupo«botones«.

Los archivos png que contienen las hojas de sprites se almacenan en el servidor, en el directorio «/files/stages/sprites». (Si quieres utilizar hojas de sprites individuales, facilítaselas a tu gestor de cuenta de klar.land y él podrá ponerlas a tu disposición en el servidor).

«buttonObjectName» es el nombre del objeto 3D de la escena. La cadena «botón» debe incluirse en el nombre. Esto hace que el objeto se comporte como un botón. Es decir, siempre estará orientado hacia la cámara y cuando se pulse el botón desaparecerá.

«spritename» es el nombre del archivo png ubicado en «/files/stages/sprites».

«tilesHoriz» : Número de baldosas horizontales

«tilesVert» : Número de baldosas verticales

«numTiles» : normalmente es el producto de los dos valores anteriores. En casos excepcionales, sin embargo, también puede ser un valor diferente (por ejemplo, si hay algunas fichas vacías al final).

«tileDispDuration» : Número de milisegundos durante los que debe mostrarse un azulejo.

«invisibleOnClick» : verdadero o falso, opcional. Indica si un botón se vuelve invisible después de hacer clic o no (=falso). Por defecto es verdadero.

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

Mapa de tonos

Puedes elegir entre 5 modos para ajustar el aspecto del escenario mediante el mapeado de tonos (efecto post-renderizado).

Esto puede requerir varias pruebas en combinación con el Hdr y las intensidades de luz para conseguir el aspecto óptimo para la etapa correspondiente.

Si no se especifica nada, se utiliza por defecto THREE.ACESFilmicToneMapping.

Ejemplo – JSON:

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

el mapeado tonal puede tomar los valores 0, 1, 2, 3, 4 ó 5 – por lo que

0 = TRES.NoMapaTonos

1 = TRES.MapeadoTonal Lineal

2 = TRES.ReinhardMapaTonos

3 = TRES.CineonToneMapping

4 = THREE.ACESFilmicToneMapping

5 = TRES.MapeoTonoPersonalizado

Etapa plana con ReinhardToneMapping / «tonemapping»: 2

Etapa plana con ACESFilmicToneMapping / «tonemapping»: 4 o ninguna especificación

Texturas de vídeo

Texturas de vídeo en un escenario

Para las texturas de vídeo, se especifican los nombres respectivos de los objetos 3D («videoObjeto«) en los que deben aparecer las texturas de vídeo, así como la ruta relativa al archivo de vídeo («videoArchivo«) en el servidor.

Los vídeos deben subirse al servidor en la carpeta docs de la etapa correspondiente: /files/stages/[uuid]/docs

(Coordina el almacenamiento de datos con tu gestor de cuenta de klar.land).

Ejemplo – JSON:

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

«opciones «controles

Varios parámetros para ajustar el zoom y la distancia de las cámaras, así como la asignación del botón del ratón de un escenario.

Ejemplo – 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» puede tomar los valores 1 / 2 / 3. Estos medios

1 = Dolly (estándar)
2 = ZOOM
3 = NINGUNO

es decir, 3 desactiva el zoom

«leftMouseMode» / «middleMouseMode» / «rightMouseMode» pueden tomar cada uno los valores 1 / 2 / 3 / 4 / 5 / 6. Estos medios

1 = GIRAR
2 = CAMIÓN
3 = OFFSET
4 = DOLLY
5 = ZOOM
6 = NINGUNO

Si no se especifica nada en el código JSON, los valores por defecto son

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

Etapas de 360

(Documentación a continuación)

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *