Differences

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

--- informatica:linux:tour360 [2024/03/05 12:32] – jose
+++ informatica:linux:tour360 [2024/03/09 15:51] – jose
@@ Line 56: / Line 56: @@
 </code>
+====== Modificaciones ======
+===== Girar escena de un hotspor =====
+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.
-===== Añadir nuevas fotos sin Marzipano tool =====
+Añadimos el siguiente parámetro en el hotspot de una nuestra escena. Giro indica lo que giramos yaw en la escena target:
+<code>
+      "linkHotspots": [
+        {
+          "yaw": -2.3604018548682113,
+          "pitch": 0.04299930353993808,
+          "rotation": 0,
+          "target": "1-portalon_03",
+          "giro": 1.8
+        },
+        {
+          "yaw": -1.0998945385019852,
+          "pitch": -0.04682551712140359,
+          "rotation": 0,
+          "target": "2-habitaciones_01",
+          "giro": 3.8
+        }
+      ]
+</code>
+En este caso es dentro de la escena Portalon_01 los dos hotspot que tiene. Significa que cuando estemos en la escena "portalon_01" y hagamos click en el hotspot que nos lleva a la escena portalon_03 va a girar la foto 1.8 y si vamos a habitaciones_01 va a girar la foto 3.8
+Para que esto funcione, tenemos que modificar el fichero index.js dentro de la función createLinkHotspotElement el bloque "Add click event handler"
+ORIGINAL:
+<code>
+    // Add click event handler.
+    wrapper.addEventListener('click', function() {
+      switchScene(findSceneById(hotspot.target));
+    });
+</code>
+MODIFICADO
+<code>
+  // Add click event handler.
+  wrapper.addEventListener('click', function() {
+    // Aquí es donde modificas la propiedad 'yaw' de la escena destino.
+    var scene = findSceneById(hotspot.target);
+    if (scene && scene.data.initialViewParameters) {
+      // Actualiza el 'yaw' con el valor 'giro' del hotspot.
+      scene.data.initialViewParameters.yaw = hotspot.giro;
+    }
+    // Luego cambia a la escena con el 'yaw' actualizado.
+    switchScene(scene);
+  });
+</code>
+====== Añadir nuevas fotos sin Marzipano tool ======
+Hay que hacer 3 pasos:
+<code>
+. Convertir foto en directorios y copiar en directorio tiles
+. Modificar data.js
+. Modificar index.html
+</code>
 Descargamos la foto en formato rectangular. Por ejemplo si la tenemos subida a kuula y la editamos, abajo a la derecha está la opción download
 Para convertir las fotos en formato Marzipano usamos este repositorio nodejs y este repo:
   https://github.com/jessehhydee/marzipano-pano-tiler.git
-  node index.js
-  npm install
-  node index.js
 Por ejemplo tenemos nuestra foto en la ruta:
@@ Line 80: / Line 132: @@
 Convertimos la foto:
   node index.js
+Tarda un poco, unos 2 minutos, pone "..images fetched" y luego acaba:
 <code>
 ..cubemap created
@@ Line 218: / Line 272: @@
 Copiamos el directorio dentro de la instalación de marzipano en el directorio tiles
+Por ejemplo si hemos añadido planta2_01 se suele poner el ID: 3-planta2_01 para tenerlos ordenados.
+El directorio tiles nos quedaría mas o menos así
+<code>
+└── tiles
+    ├── 0-portalon_01
+    ├── 1-portalon_02
+    ├── 2-patio_01
+    └── 3-planta2_01
+</code>
+Modificamos el fichero data.js añadiendo otra entrada al vector json de Scenes. Podemos copiar otro tal cual y después ir cambiando los parámetros, solo tenemos que cambiar ID para que coincida con el que tenemos:
+<code>
+    {
+      "id": "3-planta2_01",
+      "name": "planta2_01",
+      "levels": [
+        {
+          "tileSize": 256,
+          "size": 256,
+          "fallbackOnly": true
+        },
+        {
+          "tileSize": 512,
+          "size": 512
+        },
+        {
+          "tileSize": 512,
+          "size": 1024
+        },
+        {
+          "tileSize": 512,
+          "size": 2048
+        }
+      ],
+      "faceSize": 1368,
+      "initialViewParameters": {
+        "pitch": 0,
+        "yaw": 0,
+        "fov": 1.5707963267948966
+      },
+      "linkHotspots": [],
+      "infoHotspots": []
+    }
+</code>
+Y por último tenemos que añadir el DIV en el fichero index.html:
+<code>
+<div id="sceneList">
+  <ul class="scenes">
+      <a href="javascript:void(0)" class="scene" data-id="0-portalon_01">
+        <li class="text">portalon_01</li>
+      </a>
+      <a href="javascript:void(0)" class="scene" data-id="1-portalon_02">
+        <li class="text">portalon_02</li>
+      </a>
+      <a href="javascript:void(0)" class="scene" data-id="2-patio_01">
+        <li class="text">patio_01</li>
+      </a>
+      <a href="javascript:void(0)" class="scene" data-id="3-planta2_01">
+        <li class="text">planta2_01</li>
+      </a>
+  </ul>
+</div>
+</code>