• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página
logo web Geoinnova

Geoinnova

Consultoría y Formación en SIG y Medio Ambiente

  • Geoinnova
    • Asociación
    • Equipo
    • Visor de proyectos Geoinnova
    • Geolibrería
    • Alianzas Estratégicas
  • Consultoría
    • Consultoría y Desarrollo en Sistemas de Información Geográfica
    • Consultora Ambiental
    • Turismo sostenible
    • Planificación urbana y ordenación del territorio
    • Planes Urbanos de Actuación Municipal – PUAM
    • Geomarketing
  • Servicios
    • Planero Web
    • QElectricGIS
    • Plugins
  • Formación
    • Todos los cursos
    • Webinars
    • Máster y Diplomas
    • Cursos de ArcGIS
    • Cursos de QGIS
    • Cursos de Teledetección
    • Cursos de Medioambiente
  • Medio Ambiente
    • Consultora Ambiental
    • Estudios ambientales para proyectos de energías renovables
    • Estudios de Impacto e Integración Paisajística
    • Evaluación Ambiental Estratégica de planes y programas
    • Estudio de Impacto Ambiental para proyectos
    • Cálculo huella de carbono
    • Educación Ambiental
    • Cursos de Medioambiente
  • Coworking
  • Blog
    • SIG
    • Medio Ambiente
    • Teledetección
    • Programación y Desarrollo SIG
    • Corporativo
  • Contacto
    • Soporte de Clientes – Tickets
Programación y Desarrollo SIG

Expresando magnitudes 3D sobre mapas con ThreeJS

16/11/2020 Deja un comentario

La introducción de técnicas gráficas WebGL para la visualización de datos es una técnica que se va extendiendo gracias al poder visual que conlleva y facilidad de expresión sobre la complejidad de los datos que podemos manejar.

El salto al 3D ofrece de hecho un nuevo eje donde poder crear nuevas formas de expresar y comprender el dato, y para poder expresarlo he creado un ligero ejemplo en GitHub donde podéis seguir esta experiencia, donde podréis acceder, copiar y comentar.

Resultado final de nuestro ejemplo usando WebGL
Resultado final de nuestro ejemplo usando WebGL

Estructura HTML

El ejemplo consta de una estructura básica de HTML:

  • Un sencillo index.html
  • Un Javascript terrain.js
  • Una carpeta que carga las librerías WebGL que en este caso son de ThreeJS.

ThreeJS es la librería WebGL más importante para el desarrollo en sistemas WebGL y 3D, que de hecho es equipada en proyectos tan relevantes en geo como Mapbox, Potree o Terre3.

En esta carpeta encontramos 3 archivos:

  • Detector.js: Nos permite averiguar la disponibilidad de WebGL del navegador.
  • OrbitControls.js: Habilita los movimientos de cámara en 3D con el ratón.
  • Three.min.js: Es el corazón de la librería

Código de la aplicación web 3D

HTML

EL HTML no tiene mucha miga ya que será el Javascript quien haga el trabajo principalmente.

Encontramos en la cabecera la llamada a nuestro Javascript terrain.js y una imagen en el cuerpo que será la que utilicemos para crear nuestro mapa, y finalmente en la zona de script dos llamadas a nuestra librería, una para crear propiamente el mapa 3D y la otra para insertar los pilares con las magnitudes tal como se ve en la imagen del ejemplo.

<!DOCTYPE html>
<html>
  <head>
    <title>OGC Maps 3D - TR3</title>
    <script src="terrain.js"></script>
  </head>
  <body>
    <img
      id="imgOri"
      src="spain-01.png"
      width="892"
      height="632"
      style="display: none"
    />
    <div id="contMeshMap" style="width: 600px; height: 600px"></div>
    <script type="text/javascript">
      function initMap() {
        var imgOriObj = document.getElementById("imgOri");
        TR3.setMeshMap(imgOriObj, "contMeshMap");
        TR3.loadFile([{ point: [30, 3, -70, "Madrid"] }], [[20, 1, 20]]);
      }
      initMap();
    </script>
    
  </body>
</html>

Una estructura muy sencilla que consiste en cargar una imagen “imgOriObj” que será la base de nuestro mapa, para transformarla y llevarla al DIV de destino “contMeshMap”.

Terrain.js

Aquí haremos nuestra magia WebGL con la librería ThreeJS.

Inicialización

Desde el HTML comenzamos llamando a la función “setMeshMap” y esta nos lleva a la inicialización del entorno WebGL que gira entorno a la escena que va a contener todos los elementos que queramos visualizar.

TR3.scene = new THREE.Scene();

Seguidamente llamamos a la cámara para que la escena se visualice con los parámetros de su campo visual.

TR3.camera = new THREE.PerspectiveCamera(TR3.fov, TR3.canvasDestW / TR3.canvasDestH, 1, 20000);

Para poder manejar la cámara mediante el ratón y cursor llamamos a orbitControls con la cámara y el lugar de destino como parámetros.

TR3.controls = new THREE.OrbitControls( TR3.camera, canvasDest );

Finalmente seguimos con la función que creará el mapa “makeWorld” con la imagen como parámetro, también se llama a la función de la animación para que ocurra el movimiento en la escena y unos eventos básicos.

TR3.makeWorld( imgOri );

El mapa

En la función makeWorld, hacemos que la imagen se convierta en un elemento 3D con una simple función, y colocamos la cámara en su posición.

TR3.camera.position.y = Math.cos(radianFOV/2)*(TR3.widthImg/2)/Math.sin(radianFOV/2)/1.5;
TR3.camera.position.z = TR3.camera.position.y*Math.sin(Math.PI/4);
    
/*Texture-Material*/
var texture = new THREE.Texture(imgConteint);
texture.needsUpdate = true;
TR3.material = new THREE.MeshBasicMaterial({map: texture});
    
/*Image-Mesh*/
var geometry = new THREE.PlaneBufferGeometry( TR3.widthImg, TR3.heightImg );
TR3.mesh = new THREE.Mesh( geometry, TR3.material);

Posicionamos la cámara con razones trigonométricas basadas en el ángulo de cámara o FOV, y creamos la malla 3D que contiene la imagen del mapa. La malla, se crea mediante un material y una geometría, obviamente la geometría es un plano del tamaño de la imagen “PlaneBufferGeometry( Width, Height )” y el material es la textura que tiene la imagen “MeshBasicMaterial({ map: texture })”, con lo que el plano se crea en base a este binomio de textura y geometría.

Los pilares

Para finalizar, incluimos los pilares que representan las magnitudes, que como en el caso del mapa se componen de una geometría y un material, que es lo habitual.

var gltf = new Array();
    
var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
var material = new THREE.MeshNormalMaterial();
var objGLTF = new THREE.Mesh( geometry, material );
gltf.scene = objGLTF;
objGLTF.position.set( pos[0].point[0], pos[0].point[1], pos[0].point[2] );
objGLTF.scale.set( scale[0][0], scale[0][1], scale[0][2] );
geometry.translate( 0, 0.5, 0 );
TR3.scene.add( objGLTF );

En esta ocasión creamos el pilar mediante una geometría de caja “BoxBufferGeometry(1,1,1)” de tamaño 1 y un material predeterminado “MeshNormalMaterial()” Que posicionamos y escalamos según los parámetros que le estemos dando desde la llamada en el HTML, que finalmente se añade a la escena.

Conclusiones

Este pequeño ejemplo es un reflejo de lo que se pude hacer con un puñado de líneas y un par de nuevos conceptos, siendo un comienzo para la curiosidad y la exploración. Así que os animo a descargar el ejemplo modificar y experimentar en este entorno, donde hay todo un mundo que explorar creando nuevas habilidades sorprendentes.

WebGL Map con ThreeJS

Autor: Agustín Costa Cimadevilla
Tutor del Curso de Desarrollo de aplicaciones de mapas web en 3D con tecnologías de código abierto (ThreeJS)

Etiquetas: 3D, threeJS

Apúntate a nuestra newsletter semanal

"*" señala los campos obligatorios

Consentimiento*
*
Este campo es un campo de validación y debe quedar sin cambios.

Información legal

Cumplimos el RGPD (Reglamenteo General de Protección de Datos) y esta en la primera información que debes saber. Responsable: Asociación Geoinnova. Finalidad: Apuntarte en nuestra base de datos para poder enviarte nuestra newsletter y cualquier otra información de interes. Legitimidad: Nos das tu consentimiento para comunicarnos contigo. Derechos: Tienes derecho a acceder, rectificar, limitar y suprimir tus datos. Para una información más ampliada entra a nuestra política de privacidad.

Artículos relacionados

Modelos en 3D con ERDAS Imagine
24/03/2022
7 visores cartográficos imprescindibles sobre el volcán de La Palma
14/02/2022
Nuevo Curso de Desarrollo de aplicaciones de mapas web en 3D con tecnologías de código abierto (ThreeJS)
13/03/2022

Agustín Costa

Desarrollador de web en entornos geoespaciales con una larga trayectoria profesional vinculado a proyectos del IGN y el CNIG en proyectos como la fototeca o iberpix. Mi experiencia ligada a proyectos de I+D e inquietud por los recursos gráficos como WebGL me ha llevado a crear proyectos personales como https://terre3.es donde trato de innovar libremente y aportar prototipos a la comunidad que resuelvan nuevas maneras de aplicar la información geoespacial en 3D. En Geoinnova soy tutor del Curso de Desarrollo de aplicaciones de mapas web en 3D con tecnologías de código abierto (ThreeJS)

Interacciones con los lectores

¿Quieres comentarnos algo? Adelante! Cancelar la respuesta

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

Footer

Menú Legal

  • Aviso Legal
  • Política de privacidad
  • Política de cookies
  • Términos y condiciones

Otras páginas de interes

  • Promociones y descuentos en formación
  • Formación bonificada FUNDAE

Contacto

Calle Luis Morondo Urra nº 8 Bajo A
31006 Pamplona (Navarra)
info@geoinnova.org
+34 948 117 137

Horario de atención

Lunes a Viernes - 09:00 a 14:00 y de 16:00 a 19:00.
Fines de semana y Festivos - Exclusivamente por mail.
Horario de Verano (01 de julio al 30 de agosto): De lunes a viernes de 8 a 15h.
Entidad adherida a Confianza Online Certificado de inscripción en el Registro de huella de carbono, compensación y proyectos de absorción Logo Plazox

© 2023 · Desarrollada por Geoinnova en colaboración con OikosMSP

Gestionar el Consentimiento de las Cookies
Utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. Lo hacemos para mejorar la experiencia de navegación y para mostrar anuncios personalizados. El consentimiento a estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos anónimos. Sin una requerimiento, el cumplimiento voluntario por parte de su proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarlo.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en un sitio web o en varios sitios web con fines de marketing similares.
Administrar opciones Gestionar los servicios Gestionar proveedores Leer más sobre estos propósitos
Preferencias
{title} {title} {title}