Technical Implementation & WebXR

¿Cómo agregar programáticamente hotspots clicables y pop-ups multimedia en un entorno 3D con Three.js?

three-js, hotspots, development, interactive

En Three.js, crea marcadores de hotspot como sprite meshes o elementos HTML superpuestos posicionados en el espacio 3D usando CSS2DRenderer. Usa raycasting (THREE.Raycaster) para detectar intersecciones del mouse o toque con los objetos hotspot. Al hacer clic, activa overlays emergentes que contengan imágenes, video, texto o enlaces. Para el modo VR, implementa interacción basada en la mirada, donde al mantener el retículo sobre un hotspot durante un tiempo determinado se activa la misma acción.

three-jshotspotsdevelopmentinteractive

¿Te resultó útil este artículo?

Volver al Centro de Ayuda

Artículos relacionados

Technical Implementation & WebXR

¿Cómo eliminar por completo las sombras del trípode y el nadir en un tour virtual 360 de bienes raíces?

El nadir (el punto ciego inferior donde aparece el trípode) se puede corregir de varias formas: las herramientas de parcheo automático con IA en plataformas como Matterport lo resuelven de forma automática. Para flujos de trabajo manuales, puedes usar el sello de clonar de Photoshop sobre la proyección equirectangular, o capturar una toma adicional a mano alzada mirando hacia abajo desde cada posición y combinarla en postproducción. Algunos fotógrafos también usan tapas de nadir, imágenes prefabricadas con la marca que cubren la posición del trípode.

Technical Implementation & WebXR

¿Por qué las líneas verticales convergen en mis fotos panorámicas 360 de interiores para bienes raíces?

Las verticales convergentes en los panoramas 360 se deben a la distorsión del lente y a una nivelación imprecisa de la cámara durante la toma. La cámara 360 debe estar perfectamente nivelada (usa una base niveladora o un trípode con nivel de burbuja). En la postproducción, aplica correcciones de inclinación en PTGui o en tu software de ensamblado. Algunas cámaras cuentan con nivelación de horizonte integrada que corrige automáticamente los desajustes menores durante la captura.

Technical Implementation & WebXR

¿Cómo optimizar un modelo Gaussian Splat 3D grande de bienes raíces para que cargue más rápido en navegadores móviles?

Los modelos de Gaussian Splatting pueden ser muy pesados. Puedes optimizarlos de varias formas: reduciendo el conteo de splats mediante decimación sin sacrificar la calidad visual, implementando streaming con nivel de detalle (LOD) para cargar primero los elementos cercanos, comprimiendo los datos de la nube de puntos con cuantización, y usando carga progresiva para que los usuarios vean una vista previa básica en segundos mientras el detalle completo se carga en segundo plano. Three.js y shaders personalizados de WebGL son las herramientas principales para renderizar splats en el navegador.

Technical Implementation & WebXR

¿Qué causa errores graves de costura al capturar un tour virtual 3D en un pasillo estrecho?

Los pasillos estrechos generan errores de paralaje porque las superficies cercanas se desplazan de forma considerable entre los múltiples lentes de la cámara. El algoritmo de costura tiene dificultades cuando los objetos están muy cerca de la cámara (a menos de 1 o 2 metros). Soluciones: coloca la cámara en el centro del pasillo, usa un lente con menor desplazamiento de paralaje, captura más posiciones con mayor proximidad entre sí y, en posproducción, utiliza un software de costura con corrección de paralaje que maneje geometría de rango cercano.