informatica:linux:tour360
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revision | |||
informatica:linux:tour360 [2024/03/09 15:51] – jose | informatica:linux:tour360 [2024/03/09 16:18] (current) – jose | ||
---|---|---|---|
Line 106: | Line 106: | ||
</ | </ | ||
+ | |||
+ | ===== 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 | ||
+ | < | ||
+ | // Crear un contenedor para el mini-mapa | ||
+ | var miniMapContainer = document.createElement(' | ||
+ | miniMapContainer.style.position = ' | ||
+ | miniMapContainer.style.right = ' | ||
+ | miniMapContainer.style.bottom = ' | ||
+ | miniMapContainer.style.width = ' | ||
+ | miniMapContainer.style.height = ' | ||
+ | miniMapContainer.style.zIndex = ' | ||
+ | |||
+ | // Añadir el mini-mapa al contenedor | ||
+ | var miniMap = document.createElement(' | ||
+ | miniMap.src = ' | ||
+ | miniMap.style.width = ' | ||
+ | miniMap.style.height = ' | ||
+ | miniMap.style.pointerEvents = ' | ||
+ | |||
+ | // Añadir el marcador al contenedor | ||
+ | var marker = document.createElement(' | ||
+ | marker.style.position = ' | ||
+ | marker.style.width = ' | ||
+ | marker.style.height = ' | ||
+ | marker.style.backgroundColor = ' | ||
+ | marker.style.borderRadius = ' | ||
+ | marker.style.zIndex = ' | ||
+ | // 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 = ' | ||
+ | marker.style.top = ' | ||
+ | |||
+ | // 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); | ||
+ | </ | ||
+ | |||
+ | Creamos la función actualizarPosicionDelMarcador al final del documento antes de estas líneas: | ||
+ | |||
+ | // Display the initial scene. | ||
+ | switchScene(scenes[0]); | ||
+ | |||
+ | Función actualizarPosicionDelMarcador | ||
+ | < | ||
+ | function actualizarPosicionDelMarcador(nuevaX, | ||
+ | // Suponiendo que ' | ||
+ | // y ' | ||
+ | // ' | ||
+ | // relativas al contenedor del mini-mapa. | ||
+ | |||
+ | marker.style.left = nuevaX + ' | ||
+ | marker.style.top = nuevaY + ' | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | La función la llamamos dentro de la función switchScene: | ||
+ | < | ||
+ | function switchScene(scene) { | ||
+ | stopAutorotate(); | ||
+ | scene.view.setParameters(scene.data.initialViewParameters); | ||
+ | scene.scene.switchTo(); | ||
+ | startAutorotate(); | ||
+ | updateSceneName(scene); | ||
+ | updateSceneList(scene); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | La ponemos al final del todo después de updateSceneList | ||
+ | < | ||
+ | function switchScene(scene) { | ||
+ | stopAutorotate(); | ||
+ | scene.view.setParameters(scene.data.initialViewParameters); | ||
+ | scene.scene.switchTo(); | ||
+ | startAutorotate(); | ||
+ | updateSceneName(scene); | ||
+ | updateSceneList(scene); | ||
+ | actualizarPosicionDelMarcador(scene.data.initialViewParameters.x, | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | 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 | ||
+ | < | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | }, | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | |||
====== Añadir nuevas fotos sin Marzipano tool ====== | ====== Añadir nuevas fotos sin Marzipano tool ====== |
informatica/linux/tour360.txt · Last modified: 2024/03/09 16:18 by jose