Creando objetos en 3D con HTML5

Home - 3D, ANIMACION Y DESARROLLO DE PRODUCTO - Creando objetos en 3D con HTML5

Cuantas veces hemos tratado de crear un objeto 3D para nuestro sitio y no ha resultado nada sencillo. Si realizamos una búsqueda en la red, nos encontraremos varias formas de crear un objeto 3D, ya sea por medio de Web GL o CSS, incluso mediante editores web

html5_logo_512

¿Qué es?

Una biblioteca 3D que genera Web GL en el navegador, muy ligera, con un bajo nivel de complejidad para los que no sepan mucho de cómo modelar. También cuenta con un editor en línea para empezar a trabajar en el proyecto en cuestión, además tenemos soporte con canvas, renders con Web GL y CSS3D.

editthree

Algo muy reconocible de esta librería es que acorta el código que se está generando, un ejemplo que ellos mencionan mucho es el hecho de crear un simple cubo en WebGL, sin esta librería saldrían muchísimas líneas de código en javascript, y three.js lo hace sólo en una fracción de todo el código. Genial, no?!

Para convencerte de ello, te dejaré un código para que lo pruebes.

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <title>My first Three.js app</title>
    <style>
    body {
        margin: 0;
    }
    
    canvas {
        width: 100%;
        height: 100%
    }
    </style>
</head>

<body>
    <script src="js/three.min.js"></script>
    <script>
   var scene = new THREE . Scene ();
var camera = new THREE . PerspectiveCamera ( 75 , window . innerWidth / window . innerHeight , 0.1 , 1000 );

var renderer = new THREE . WebGLRenderer ();
renderer . setSize ( window . innerWidth , window . innerHeight );
document . body . appendChild ( renderer . domElement );

var geometry = new THREE . BoxGeometry ( 1 , 1 , 1 );
var material = new THREE . MeshBasicMaterial ( { color : 0x00ff00 } );
var cube = new THREE . Mesh ( geometry , material );
scene . add ( cube );

camera . position . z = 5 ;

var render = function () {
requestAnimationFrame ( render );

cube . rotation . x += 0.1 ;
cube . rotation . y += 0.1 ;

renderer . render ( scene , camera );
};

render ();
    </script>
</body>

</html>

.Te recomendamos que juegues con los valores para que obtengas una mejor comprensión de cómo funciona, y así es cómo generas ya una aplicación Three.js de manera sencilla.

 

 

 

fuente: http://html5facil.com/tips/creando-objetos-en-3d-con-html5/