Html5 CSS3 Cubo 3D en Javascript

Al corriente: ene. 04, 2015

Durante un tiempo he estado experimentando con la creación de objetos 3D en un navegador web normal sin recurrir a complementos como Flash, Silverlight, etc. El cubo que se muestra aquí está adaptado de otro sitio web 3D que creé anteriormente.

WebGL nos permite renderizar modelos 3D complejos en un navegador. Sin embargo, aquí consideraré la creación de un objeto 3D usando los distintos CSS3 Comandos de transformación que pueden tomar un elemento HTML 2D normal y proyectarlo en un espacio 3D.

La ventaja de utilizar transformaciones 3D en elementos HTML normales es que puedes proyectar cosas como contenido Iframe, imágenes o cualquier otro elemento HTML en 3D, creando algunos efectos realmente interesantes.

Vista previa en vivo

Aquí hay una muestra del cubo usando algunas imágenes y texto. Puedes usar el ratón para hacer girar el cubo.

Compatibilidad

Como el cubo 3D que se muestra aquí utiliza transformaciones de matriz CSS3 en lugar de los métodos simples de rotación, escala y traducción utilizados por otros cubos 3D, funciona bien en IE11. Además de IE11, ha sido probado en Firefox, Chrome, Safari y Mobile Safari para iOS.

Fuente HTML

Lo importante aquí es que incluimos el archivo "Cube.js". También necesitamos JQuery, eso también está incluido.

El Div con el ID my3Dsurface contendrá nuestro cubo 3D. Observe el atributo data-facewidth="256". Esto especifica el tamaño de las caras de nuestro cubo.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Css3 3D Sample</title>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/cube.js"></script>
    <script src="js/sample.js"></script>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="my3Dsurface" class="js3dsurface" data-facewidth="256"></div>
</body>
</html>

Fuente Javascript

A continuación creamos una instancia de Js3DSurface y le pasamos una matriz de contenido que se mostrará en cada cara de nuestro cubo. En este ejemplo utilizamos imágenes y contenido html simple. Puede agregar HTML más complejo, como Iframes, etiquetas de video, etc.

También agregamos 3 controladores de eventos para permitirnos girar el cubo con el mouse. Cuando el mouse se mueve con el botón izquierdo presionado, llamamos a adjRot pasándole la nueva posición X e Y del mouse.

var cube;
var mouseisdown = false;

$(document).ready(function () {
    var faces = new Array();
    faces.push('<img src="images/manic-miner-willy.jpg" />');
    faces.push('<img src="images/terminator-t-800-head-design.png" />');
    faces.push('<div class="plain"><h1>3D Cube!</h1><p>Some plain html content to be projected onto the side of the cube! Works in the latest versions of Chrome, Firefox, IE, Safari, Safari Mobile and other Html5 modern browsers.</div>');
    faces.push('<img src="images/sinclair-c5.jpg" />');
    faces.push('<img src="images/terminator-t-800-head-design.png" />');
    faces.push('<img src="images/sinclair-c5.jpg" />');

    cube = new Js3DSurface("my3Dsurface", faces);

    cube._backSurface.addEventListener('mousemove', mousemove, false);
    document.body.addEventListener('mousedown', mousedown, false);
    document.body.addEventListener('mouseup', mouseup, false);
});

function mousedown(e) {
    mouseisdown = true;
    if (e != null) {
        e.stopPropagation();
        e.preventDefault();
    }

    returnfalse;
}

function mouseup(e) {
    mouseisdown = false;
    if (e != null) {
        e.stopPropagation();
        e.preventDefault();
    }
    returnfalse;
}

function mousemove(e) {
    if (mouseisdown) {
        var _off = $(cube._backSurface).offset();
        var x = e.clientX - _off.left;
        var y = e.clientY - _off.top;
        y += $(window).scrollTop();

        adjRot(x, y);
    }
}

function adjRot(x, y) {
    var w = $(cube._backSurface).width();
    var h = $(cube._backSurface).height();
    var step = 10;
    var ry = (((x - (w / 2)) / w) * step);
    var rx = (((y - (h / 2)) / h) * step);

    cube._cubes[0]._Torque._Y = ry;
    cube._cubes[0]._Torque._X = rx;
}

¡Obtenga el código de muestra usted mismo desde el enlace a continuación y comience a crear fantásticos cubos HTML de proyectos 3D!

Descarga de archivos

Haga clic en el siguiente enlace para descargar los archivos:

Cubo 3D en Css3: 3dcss3.zip (141,27kb)

Proporcionamos todos los archivos tal cual, sin ningún tipo de garantía, para utilizarlos en sus propios proyectos personales. No pueden redistribuirse ni venderse sin permiso.