informatica:linux:tour360
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision | ||
informatica:linux:tour360 [2024/03/05 10:52] – jose | informatica:linux:tour360 [2024/03/09 15:51] – jose | ||
---|---|---|---|
Line 5: | Line 5: | ||
https:// | https:// | ||
+ | |||
+ | ====== Instalación ====== | ||
+ | Descargamos el código de Marzipano | ||
+ | git clone https:// | ||
+ | Ejecutamos docker y mapeamos el directorio: | ||
+ | docker run --name marzipano -v / | ||
+ | |||
+ | Instalamos Marzipano: | ||
+ | npm install | ||
+ | npm run dev | ||
+ | Ya lo tenemos funcionando en http:// | ||
===== Parámetros ===== | ===== Parámetros ===== | ||
Line 45: | Line 56: | ||
</ | </ | ||
+ | ====== 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: |
+ | < | ||
+ | " | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | }, | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | } | ||
+ | ] | ||
+ | </ | ||
+ | |||
+ | En este caso es dentro de la escena Portalon_01 los dos hotspot que tiene. Significa que cuando estemos en la escena " | ||
+ | |||
+ | Para que esto funcione, tenemos que modificar el fichero index.js dentro de la función createLinkHotspotElement el bloque "Add click event handler" | ||
+ | |||
+ | ORIGINAL: | ||
+ | < | ||
+ | // Add click event handler. | ||
+ | wrapper.addEventListener(' | ||
+ | switchScene(findSceneById(hotspot.target)); | ||
+ | }); | ||
+ | </ | ||
+ | MODIFICADO | ||
+ | < | ||
+ | // Add click event handler. | ||
+ | wrapper.addEventListener(' | ||
+ | // Aquí es donde modificas la propiedad ' | ||
+ | var scene = findSceneById(hotspot.target); | ||
+ | if (scene && scene.data.initialViewParameters) { | ||
+ | // Actualiza el ' | ||
+ | scene.data.initialViewParameters.yaw = hotspot.giro; | ||
+ | } | ||
+ | // Luego cambia a la escena con el ' | ||
+ | switchScene(scene); | ||
+ | }); | ||
+ | |||
+ | </ | ||
+ | |||
+ | ====== Añadir nuevas fotos sin Marzipano tool ====== | ||
+ | Hay que hacer 3 pasos: | ||
+ | < | ||
+ | 1. Convertir foto en directorios y copiar en directorio tiles | ||
+ | 2. Modificar data.js | ||
+ | 3. Modificar index.html | ||
+ | </ | ||
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 | 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: | Para convertir las fotos en formato Marzipano usamos este repositorio nodejs y este repo: | ||
https:// | https:// | ||
- | |||
- | 4 node index.js | ||
- | 5 npm install | ||
- | 6 node index.js | ||
Por ejemplo tenemos nuestra foto en la ruta: | Por ejemplo tenemos nuestra foto en la ruta: | ||
Line 69: | Line 132: | ||
Convertimos la foto: | Convertimos la foto: | ||
node index.js | node index.js | ||
+ | Tarda un poco, unos 2 minutos, pone " | ||
+ | |||
< | < | ||
..cubemap created | ..cubemap created | ||
Line 80: | Line 145: | ||
..images fetched | ..images fetched | ||
</ | </ | ||
- | En el directorio output nos ha creado lo siguiente: | + | En el directorio output nos ha creado lo siguiente |
< | < | ||
. | . | ||
Line 203: | Line 268: | ||
| `-- 7 | | `-- 7 | ||
`-- cube-map | `-- cube-map | ||
+ | </ | ||
+ | |||
+ | 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í | ||
+ | < | ||
+ | └── tiles | ||
+ | ├── 0-portalon_01 | ||
+ | ├── 1-portalon_02 | ||
+ | ├── 2-patio_01 | ||
+ | └── 3-planta2_01 | ||
+ | </ | ||
+ | |||
+ | 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, | ||
+ | |||
+ | < | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | }, | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | }, | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | }, | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | } | ||
+ | ], | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | }, | ||
+ | " | ||
+ | " | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | Y por último tenemos que añadir el DIV en el fichero index.html: | ||
+ | < | ||
+ | <div id=" | ||
+ | <ul class=" | ||
+ | |||
+ | <a href=" | ||
+ | <li class=" | ||
+ | </a> | ||
+ | |||
+ | <a href=" | ||
+ | <li class=" | ||
+ | </a> | ||
+ | <a href=" | ||
+ | <li class=" | ||
+ | </a> | ||
+ | <a href=" | ||
+ | <li class=" | ||
+ | </a> | ||
+ | </ul> | ||
+ | </ | ||
+ | |||
</ | </ | ||
| |
informatica/linux/tour360.txt · Last modified: 2024/03/09 16:18 by jose