Tridiv: Útil Editor CSS3 para Objetos 3D

Usar imágenes como textura

En lugar de pintar los lados de una forma con un solo color, se puede usar una imagen como textura. Al hacerlo, puede elegir una imagen para todos los lados o diferentes imágenes para lados individuales.

Imagen como textura para los lados de una forma 3D

Los archivos de imagen no se cargan sino que se transfieren como una URL. Las imágenes que desea utilizar tienen que estar ya en la web para poder utilizarlas. Las imágenes se extienden sobre el lado respectivo y se distorsionan si es necesario.

Organizar formas en el espacio

El editor ofrece cuatro vistas diferentes de la superficie de trabajo. El primero muestra las formas en vista 3D. Los otros tres muestran las formas en dos dimensiones en los tres planos espaciales. De esta manera, los elementos se pueden rotar fácilmente en el plano de los ejes x y z, los ejes z e y, así como los ejes x e y. Aunque las formas individuales se mantienen muy simples, se pueden crear objetos 3D más complejos juntando múltiplos de las formas básicas. Los ejemplos en el sitio web muestran que incluso un X-Wing de Star Wars se puede crear con un poco de HTML y CSS3. En la vista 3D, el ángulo se puede modificar de la forma deseada. Esto le permite echar un vistazo a la forma desde todos los lados. Las líneas auxiliares te ayudan a orientarte y te indican dónde se encuentran los pivotes.

Vista previa e integración

Puede cambiar fácilmente entre el editor y la vista previa usando un interruptor. Las líneas auxiliares no se muestran en la vista previa. Hay dos formas de integrar el mundo 3D en otro proyecto. Por un lado, puede copiar la fuente HTML y CSS3. Sin embargo, no tendrá una vista interactiva de la vista 3D. Esto significa que no será posible mover el objeto 3D.

X-Wing hecho con HTML y CSS3

Sin embargo, existe la opción de integrar la vista 3D usando iFrame. Esto viene con la ventaja de que puede mover la vista 3D libremente arrastrando y soltando. Además, es posible mejorar o reducir la vista.

No es necesario registrarse

Lo que es especialmente notable es que no es necesario registrarse para usar Tridiv. Incluso es posible guardar proyectos. Estos no se guardan, por ejemplo, en un perfil de usuario en la web, sino en el almacenamiento del navegador local. La desventaja de este método es, por supuesto, que después de reinstalar el navegador, los proyectos guardados se pierden. Pero dado que el servidor también guarda todos los proyectos, se puede acceder a cada proyecto mediante su propia URL.

Conclusión

Tridiv muestra muy bien las posibilidades tecnológicas de las animaciones 3D con HTML y CSS3. Muchas opciones son ciertamente más un juguete, pero aquí y allá, es posible crear y diseñar formas 3D simples para sus propios proyectos. El funcionamiento es sencillo e intuitivo. ¡Darle una oportunidad!

(dpe)