Y aquí estamos ante otro episodio de cosas que cambian y dejan todo roto a su paso. Aunque en realidad estoy exagerando. La función de incrustar de Sketchfab sigue trabajando, pero aprovecharé que han cambiado de dueño y reglas para implementar algo mas domestico, como con el resaltado de código que ya vimos antes.

Introducción

No termino de entender que criterios tiene WordPress para incrustar otras webs. Pego un enlace de mi blog y no hace nada, pero pego el enlace de mi modelo en sketchfab y ahí esta, funcional y bonito.

https://recogiendofrutos.interlan.ec/2024/06/18/modelo-3d-patito-columpiandose/

¿Significa esto que ya está? ¿No hay nada que arreglar? Por supuesto, pero tengo ganas de complicarme la vida con algo mas domestico para saber si se puede. Es decir, quiero tener todo el control posible del modelo que quiero compartir.

El problema

No hay problema, simplemente quiero ver que tal es intentar otros enfoques. Como meta principal que tengo, es hacer todo lo mas domestico posible. De preferencia, que el sitio sea visible con el navegador mas minimalista que se pueda. A veces hago pruebas con Elinks y hasta ahora todo funciona bien, pero quedan cosas que simplemente no van a trabajar en un sistema sin Javascript.

¿Que puedo hacer? La verdad, nada. Las imágenes no aparecen en la consola por obvias razones, pero actualmente no tengo un sistema de galerías integrado. trato de prescindir todo lo posible de Javascript con el fin de hacer mi sitio lo mas ligero posible, pero nada, es complicado. Con el tiempo implementaré un sistema para hacer zoom a las imágenes.

Ahora bien, Esta idea que tengo no es solo para aplicar a modelos 3D, sino que quiero ver si se puede aplicar a objetos reales fotografiados. La fotogrametria es una buena idea, pero no estoy seguro de si esto es lo que busco.

Enfoques

Realmente esto podría ser gastar pólvora en gallinazos, pero me da curiosidad hacerlo, asi que se me ocurren varias formas de abordar esto. Podría ser que cargo el modelo entero y mediante javascript renderizarlo en pantalla, o podría ser que haga una galería especial en la que al desplazarse entre las imágenes parece ser un modelo 3D o también, usar un video con controles especiales, con el mismo propósito que el avanzarlo y retrocederlo de la impresión de ser un modelo 3D.

WordPress por supuesto, no permite subir archivos un poco especiales, por lo que intentaremos abordar esto mediante un repositorio adicional creado desde nuestra configuración de Nginx.

Para estas pruebas, he diseñado un archivo de blender con rotación de cámara para los ejemplos.

Repositorio especial

Dado que wordpress no permite que suba ciertos tipos de archivos al servidor mediante su interfaz, pensé apropiado crear un directorio que contenga un conjunto de archivos estáticos que pueda integrar en alguna entrada mediante Iframes. Esto es útil porque WordPress tampoco me deja integrar código Javascript de forma coherente y a decir verdad, tampoco es que sea recomendable hacerlo así. Hay muchas vulnerabilidades fácilmente explotables que pueden aprovecharse de eso y en la consola misma sale un error advirtiendo que no puedes incrustar objetos remotos.

Solicitud de origen cruzado bloqueada: La política de mismo origen no permite la lectura de recursos remotos en https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9870688711293426&host=ca-host-pub-2644536267352236. (Razón: Solicitud CORS sin éxito). Código de estado: (null).

Bueno, en realidad si que puedes, modificando algunas cosas, pero no debes XD

En todo caso, quiero aprovechar un poco el nuevo conocimiento adquirido en el articulo anterior y crearé un subdirectorio que se montará dentro de la URL de mi blog. Esto me permitirá subir contenido allí libremente que luego puedo incrustar en una entrada. Para esto, debo agregar el siguiente codigo antes del location /

location ^~ /public_repo/{
  alias /var/www/public_repo;
  index index.html
  try_files $uri $uri/ = 404;
}

Por supuesto, puedes ponerle el nombre que quieras y utilizar el directorio que quieras. Pero recuerda que tiene que tener usuarios y permisos compatibles con Nginx.

Archivo completo

Este enfoque es tal vez el mas sencillo y completo, puesto que basta con que tengas el archivo en formato glb para incrustarlo en la web mediante un lienzo model viewer y Javascript se encarga del resto.

<!-- Import the component -->
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
<model-viewer src="test.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls shadow-intensity="1" style="width: 100%; height: 400px;"></model-viewer>

Ventajas

• El método mas sencillo.
• Control total del objeto. Rotación en 360 grados.
• Casi no se necesita agregar código.

Desventajas

• Tienes que dejar expuesto tu archivo fuente y cualquiera lo puede descargar.
• Dependiendo de lo que hagas, puede incrementar el tamaño resultante del archivo monstruosamente.
• Lo mismo. Dependiendo de lo que hagas, es posible que necesites hacer un archivo especialmente diseñado para tu sitio, lo cual añade mucho trabajo innecesario.

Detalles

Galería de imágenes

Da click al cubo y arrastra un poquito. Luego seguirá al cursor.

El segundo enfoque que he analizado, es mediante 36 frames obtenidos directamente desde blender. Esto permite que se carguen las imágenes y se muestren según la posición del cursor y javascript se encargue del renderizado. El resultado es muy bueno, pero he notado que es demasiado pesado para un uso regular.

<html>

<head>
    <style>
        #viewer-container {
            touch-action: none;
            /* Bloquea el scroll nativo solo en este elemento */
            user-select: none;
            /* Evita que se seleccione el texto/imagen al arrastrar */
        }
    </style>
</head>

<body>
    <div id="viewer-container" style="width: 500px; height: 500px; cursor: ew-resize;">
        <img id="product-image" src="images/1.png" style="width: 100%; height: auto; user-select: none;">
    </div>

    <script>
        const imgElement = document.getElementById('product-image');
        const container = document.getElementById('viewer-container');
        const totalFrames = 36;
        let startX = 0;
        let currentFrame = 1;

        // 1. Array para almacenar las imágenes ya descargadas
        const images = [];
        let loadedCount = 0;

        // 2. Fase de Predescarga
        function preloadImages() {
            for (let i = 1; i <= totalFrames; i++) {
                const img = new Image();
                img.src = `images/${i}.png`;
                img.onload = () => {
                    loadedCount++;
                    if (loadedCount === totalFrames) {
                        console.log("Todas las imágenes cargadas. Interacción lista.");
                        // Opcional: ocultar un loader o habilitar el contenedor aquí
                        container.style.cursor = 'grab';
                    }
                };
                images[i] = img; // Guardamos el objeto imagen completo
            }
        }

        // Llamamos a la precarga de inmediato
        preloadImages();

        function handleStart(e) {
            // Detecta tanto mouse (e.pageX) como touch (e.touches[0].pageX)
            startX = e.pageX || e.touches[0].pageX;
        }

        function handleMove(e) {
            if (startX === 0) return;

            const x = e.pageX || e.touches[0].pageX;
            const diff = x - startX;
            const frameOffset = Math.floor(diff / 10);

            let newFrame = ((currentFrame + frameOffset - 1) % totalFrames + totalFrames) % totalFrames + 1;

            if (images[newFrame] && images[newFrame].complete) {
                imgElement.src = images[newFrame].src;
            }
        }

        function handleEnd(e) {
            if (startX === 0) return;

            // Para touch, la posición final suele estar en 'changedTouches'
            const x = e.pageX || (e.changedTouches ? e.changedTouches[0].pageX : startX);
            const diff = x - startX;

            currentFrame = ((currentFrame + Math.floor(diff / 10) - 1) % totalFrames + totalFrames) % totalFrames + 1;
            startX = 0;
        }

        // Eventos de Mouse (PC)
        container.addEventListener('mousedown', handleStart);
        window.addEventListener('mousemove', handleMove);
        window.addEventListener('mouseup', handleEnd);

        // Eventos de Touch (Móvil)
        container.addEventListener('touchstart', handleStart, {
            passive: false
        });
        window.addEventListener('touchmove', handleMove, {
            passive: false
        });
        window.addEventListener('touchend', handleEnd);
    </script>

</body>

</html>

Ventajas

• No necesitas compartir el archivo fuente
• Exportas solo lo que necesitas mostrar
• El almacenamiento en Caché permite al visitante solo tener que esperar una vez a que se descargue todo

Desventajas

• ¡Pesa un montón!
• La rotación solo se puede en el eje horizontal
• Puede causar problemas en dispositivos mas limitados

Detalles

Video completo

Da click al cubo y arrastra un poquito. Luego seguirá al cursor.

Probablemente el mejor enfoque de todos. Gracias a los códecs de compresión, se puede conseguir un archivo realmente pequeño que no estorbe a los tiempos de carga de la página. Este enfoque permite que no necesites limitarte a usar Blender o similares para generar tus modelos, sino que mediante un buen trabajo de fotografía, también puedes utilizar videos apropiados para mostrar algún producto del mundo real.

<html>

<head>

</head>

<body>
    <!-- CSS para evitar saltos en móvil -->
    <style>
        #video-container {
            width: 100%;
            max-width: 600px;
            touch-action: none;
            /* Crucial para móviles */
            user-select: none;
        }

        video {
            width: 100%;
            pointer-events: none;
        }
    </style>

    <div id="video-container">
        <video id="product-video" muted playsinline preload="auto">
            <source src="0001-0036.webm" type="video/mp4">
        </video>
    </div>

    <script>
        const video = document.getElementById('product-video');
        const container = document.getElementById('video-container');

        let isDragging = false;
        let startX = 0;
        let startVideoTime = 0;
        const sensitivity = 0.005; // Ajusta qué tan rápido avanza el video al mover el dedo

        // Función para manejar el inicio del movimiento
        function handleStart(e) {
            isDragging = true;
            startX = e.pageX || e.touches[0].pageX;
            startVideoTime = video.currentTime;
        }

        // Función para calcular y mover el tiempo del video
        function handleMove(e) {
            if (!isDragging || !video.duration) return;

            const x = e.pageX || e.touches[0].pageX;
            const diff = x - startX;

            // Calculamos el nuevo tiempo basado en el desplazamiento
            let newTime = startVideoTime + (diff * sensitivity);

            // Ciclar el video (opcional, para rotación 360 infinita)
            if (newTime < 0) newTime = video.duration + newTime;
            if (newTime > video.duration) newTime = newTime - video.duration;

            video.currentTime = newTime;
        }

        function handleEnd() {
            isDragging = false;
        }

        // Eventos Mouse
        container.addEventListener('mousedown', handleStart);
        window.addEventListener('mousemove', handleMove);
        window.addEventListener('mouseup', handleEnd);

        // Eventos Touch
        container.addEventListener('touchstart', handleStart, {
            passive: false
        });
        window.addEventListener('touchmove', handleMove, {
            passive: false
        });
        window.addEventListener('touchend', handleEnd);
    </script>
</body>

</html>

Ventajas

• El código Javascript es mas sencillo.
• También es mas facil incrustar 1 archivo en lugar de los 36 anteriores.
• Se ahorra un monton de tiempo y recursoso

Desventajas

• Si bien el archivo resultante podría llegar a ser muy grande según necesites, aun es mas pequeño que un archivo GLB mediano.
• La calidad del video puede verse afectada en pos de ahorrar espacio. GLB es vectorial, asi que incluso puedes hacerle zoom.
• Sigue siendo un archivo adicional, afecta al tiempo de carga de tu pagina, por lo que puede reducir tu calificación SEO

Detalles

He hecho también un video de ejemplo para demostrar el funcionamiento de este sistema de rotación usando imágenes reales de un objeto que tengo en casa. Es un diseño rápido y sin mucho cuidado, pero sirve para mostrar lo que trato de explicar.

Conclusiones

Está interesante esto de incrustar contenidos completos en otra dirección del hosting. Es decir, puedo evitar sobrecargar wordpress con plugins loquisimos y tengo la flexibilidad de crear los contenidos según me plazca. Javascript incluido.

Me queda pendiente investigar por que no se usa esta idea de forma mas seguida. Tal vez porque requiera de grandes conocimientos técnicos que la mayoría de los que meten plugins a lo loco en WordPress, carecen. A ver que dice la ia:

Es una excelente pregunta, y toca un dilema común entre la eficiencia técnica y la facilidad de uso. Aquí te explico por qué muchas personas prefieren usar múltiples plugins en WordPress, a pesar de que eso pueda hacer el sitio más pesado, en lugar de optar por soluciones más ligeras como galerías HTML externas:

🧩 Ventajas de usar plugins en WordPress

Facilidad de uso (sin necesidad de código): La mayoría de los usuarios de WordPress no tienen conocimientos técnicos. Los plugins permiten agregar funcionalidades complejas (como galerías, sliders, formularios, SEO, etc.) con unos pocos clics, sin escribir una sola línea de código.
Integración nativa: Los plugins están diseñados para integrarse perfectamente con el sistema de WordPress, lo que facilita su gestión desde el panel de administración, sin necesidad de tocar archivos o subir contenido por FTP.
Actualizaciones y soporte: Muchos plugins son mantenidos activamente, lo que significa que reciben actualizaciones de seguridad, nuevas funciones y soporte técnico.
Escalabilidad: Si el sitio crece, es más fácil escalar funcionalidades con plugins que rehacer código personalizado.

🧱 Desventajas de usar muchos plugins

Rendimiento: Cada plugin puede añadir scripts, hojas de estilo y consultas a la base de datos, lo que puede ralentizar el sitio si no se gestiona bien.
Conflictos entre plugins: Algunos plugins pueden interferir entre sí, causando errores o comportamientos inesperados.
Dependencia de terceros: Si un plugin deja de actualizarse o se vuelve incompatible con nuevas versiones de WordPress, puede romper funcionalidades clave del sitio.

🧰 Ventajas de usar un directorio externo con HTML

Rendimiento optimizado: El contenido HTML estático se carga más rápido, sin necesidad de consultas a la base de datos o ejecución de scripts innecesarios.
Control total: Puedes personalizar el código al 100% sin depender de las limitaciones de un plugin.
Menor riesgo de vulnerabilidades: Al no depender de plugins de terceros, reduces la superficie de ataque.

🤔 ¿Entonces por qué se siguen usando plugins?

Porque WordPress está pensado para democratizar la creación web. La mayoría de sus usuarios no son desarrolladores, sino bloggers, emprendedores, artistas, etc., que valoran más la rapidez, comodidad y accesibilidad que el rendimiento técnico puro. Para ellos, instalar un plugin es más viable que crear y mantener un directorio HTML externo.

Si estás construyendo un sitio donde el rendimiento y la seguridad son prioritarios (por ejemplo, una web corporativa o de alto tráfico), entonces sí puede valer la pena usar soluciones más personalizadas y ligeras. Pero para la mayoría de los usuarios, los plugins siguen siendo la opción más práctica.

Bueno, muy equivocado no estaba XD