Cubo 3D Html5 CSS3 in Javascript

Inserito: gen 04, 2015

Per un po' ho sperimentato la creazione di oggetti 3D in un normale browser web senza ricorrere a plugin come Flash, Silverlight ecc. Il cubo mostrato qui è adattato da un altro sito web 3D che ho realizzato in precedenza.

WebGL ci consente di eseguire il rendering di modelli 3D complessi in un browser. Tuttavia, qui cercherò di creare un oggetto 3D utilizzando i vari CSS3 trasformare comandi che possono prendere un normale elemento Html 2D e proiettarlo nello spazio 3D.

Il vantaggio di utilizzare le trasformazioni 3D su normali elementi Html è che puoi proiettare cose come contenuti Iframe, immagini o qualsiasi altro elemento HTML in 3D creando effetti davvero interessanti.

Anteprima dal vivo

Ecco un esempio del cubo utilizzando alcune immagini e testo. Puoi usare il mouse per far girare il cubo.

Compatibilità

Poiché il cubo 3D mostrato qui utilizza le trasformazioni matrice CSS3 anziché i semplici metodi Ruota, Scala, Traduci utilizzati da alcuni altri cubi 3D, funziona bene in IE11. Oltre a IE11, è stato testato su Firefox, Chrome, Safari e Mobile Safari per iOS.

Sorgente HTML

La cosa importante qui è che includiamo il file "Cube.js". Abbiamo anche bisogno JQuery, anche quello è incluso.

Il Div con ID my3Dsurface conterrà il nostro cubo 3D. Notare l'attributo data-facewidth="256". Questo specifica la dimensione delle facce del nostro 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>

Sorgente Javascript

Successivamente creiamo un'istanza di Js3DSurface e le passiamo un array di contenuti che verranno visualizzati su ciascuna faccia del nostro cubo. In questo esempio utilizziamo immagini e semplici contenuti HTML. Puoi aggiungere HTML più complessi come Iframe, tag video ecc.

Aggiungiamo anche 3 gestori di eventi per consentirci di far girare il cubo utilizzando il mouse. Quando il mouse si sposta con il pulsante sinistro premuto, chiamiamo adjRot passandogli la nuova posizione 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;
}

Prendi tu stesso il codice di esempio dal link sottostante e inizia a creare fantastici cubi Html di progetto 3D!

Download file

Fare clic sul collegamento seguente per scaricare i file:

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

Forniamo tutti i file così come sono, senza alcun tipo di garanzia, da utilizzare nei tuoi progetti personali. Non possono essere ridistribuiti o venduti senza autorizzazione.