Differences

This shows you the differences between two versions of the page.

--- informatica:linux:tour360 [2024/03/09 15:51] – jose
+++ informatica:linux:tour360 [2025/10/14 09:45] (current) – [Comparativa entre dos tour] jose
@@ Line 5: / Line 5: @@
 https://www.marzipano.net/tool/
+====== Importación fotos ======
+Para importar fotos primero las tenemos que hacer rectangulares. En el caso de la insta360 se le da a export y selecciona esta oción:
+{{:informatica:linux:marzipano_01.png|}}
+La foto queda tal que así
+{{:informatica:linux:marzipano_02.png|}}
 ====== Instalación ======
@@ Line 18: / Line 27: @@
 ===== Parámetros =====
+El fichero data.js tiene todos los parámetros de las fotos.
 <code>
       "initialViewParameters": {
@@ Line 57: / Line 68: @@
 ====== Modificaciones ======
-===== Girar escena de un hotspor =====
+===== Girar escena de un hotspot =====
 Cuando clickamos en un hotspot la escena viene con la orientación por defecto, pero no es lo mismo si venimos por la izquierda que por la derecha o si vamos de adelante hacía atrás.
@@ Line 106: / Line 117: @@
 </code>
+===== Añadir mapa con la posición y orientación =====
+Copiamos el fichero mapa.png con capas transparentes en el directorio raiz donde está index.js
+En el fichero index.js, entre
+    // Initialize viewer.
+y
+  // Create scenes,
+Añadimos el minimapa
+<code>
+// Crear un contenedor para el mini-mapa
+var miniMapContainer = document.createElement('div');
+miniMapContainer.style.position = 'absolute';
+miniMapContainer.style.right = '10px';
+miniMapContainer.style.bottom = '10px';
+miniMapContainer.style.width = '200px'; // Ajusta según necesites, igual que el mini-mapa
+miniMapContainer.style.height = 'auto';
+miniMapContainer.style.zIndex = '100';
+// Añadir el mini-mapa al contenedor
+var miniMap = document.createElement('img');
+miniMap.src = 'mapa2.png'; // Asegúrate de usar la ruta correcta
+miniMap.style.width = '100%'; // Hace que el mini-mapa ocupe todo el contenedor
+miniMap.style.height = 'auto';
+miniMap.style.pointerEvents = 'none'; // Esto permite que los eventos del ratón pasen a través de la imagen
+// Añadir el marcador al contenedor
+var marker = document.createElement('div');
+marker.style.position = 'absolute';
+marker.style.width = '10px'; // Tamaño del marcador
+marker.style.height = '10px';
+marker.style.backgroundColor = 'red';
+marker.style.borderRadius = '50%'; // Hace que el marcador sea un círculo
+marker.style.zIndex = '101'; // Se muestra sobre el mini-mapa
+// Posicionamiento inicial del marcador dentro del contenedor del mini-mapa
+marker.style.transition = 'top 0.5s ease-out, left 0.5s ease-out';
+marker.style.left = '50px'; // Ajusta según la ubicación inicial deseada sobre el mini-mapa
+marker.style.top = '50px';
+// Añadir el mini-mapa y el marcador al contenedor
+miniMapContainer.appendChild(miniMap);
+miniMapContainer.appendChild(marker);
+// Finalmente, añadir el contenedor del mini-mapa al body o al contenedor principal
+document.body.appendChild(miniMapContainer);
+</code>
+Creamos la función actualizarPosicionDelMarcador al final del documento antes de estas líneas:
+  // Display the initial scene.
+  switchScene(scenes[0]);
+Función actualizarPosicionDelMarcador
+<code>
+function actualizarPosicionDelMarcador(nuevaX, nuevaY) {
+    // Suponiendo que 'marker' es el marcador cuya posición quieres cambiar,
+    // y 'miniMapContainer' es el contenedor del mapa y del marcador.
+    // 'nuevaX' y 'nuevaY' son las nuevas posiciones del marcador en píxeles,
+    // relativas al contenedor del mini-mapa.
+    marker.style.left = nuevaX + 'px';
+    marker.style.top = nuevaY + 'px';
+}
+</code>
+La función la llamamos dentro de la función switchScene:
+<code>
+  function switchScene(scene) {
+    stopAutorotate();
+    scene.view.setParameters(scene.data.initialViewParameters);
+    scene.scene.switchTo();
+    startAutorotate();
+    updateSceneName(scene);
+    updateSceneList(scene);
+  }
+</code>
+La ponemos al final del todo después de updateSceneList
+<code>
+  function switchScene(scene) {
+    stopAutorotate();
+    scene.view.setParameters(scene.data.initialViewParameters);
+    scene.scene.switchTo();
+    startAutorotate();
+    updateSceneName(scene);
+    updateSceneList(scene);
+    actualizarPosicionDelMarcador(scene.data.initialViewParameters.x,scene.data.initialViewParameters.y);
+  }
+</code>
+Ahora en cada escena tenemos que poner los valores x,y de la posición que están en el mapa en la sección initialViewParameters. El punto 0,0 es la esquina superior izquierda
+<code>
+      "initialViewParameters": {
+        "yaw": -1.9068445548687052,
+        "pitch": 0.1964205885417094,
+        "fov": 1.306532538376576,
+        "x" : 125,
+        "y" : 190
+      },
+</code>
 ====== Añadir nuevas fotos sin Marzipano tool ======
@@ Line 342: / Line 457: @@
 </code>
+====== Comparativa entre dos tour ======
+Comparativa a dos pantallas de 2 tours, como por ejemplo la obra
+Hay dos ficheros data.js
+<code>
+- data.js
+- data2.js
+</code>