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. Hoy les presentaremos una opción atractiva y de uso fácil que ya hemos mencionado antes como “Trabajando con Three.js“.

¿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 como puedes ver; para saber más de cómo se realizó o lo que significa cada línea de código date una vuelta por la documentación.

objetos3D

Si quieres ver algunos de éstos modelos y cómo funcionan visita la página oficial.

Cecy Martínez

Cecy Martínez

Jefa de contenido y editora en HTML5Fácil, NinjaCodeTV, Desveloperstv y Co funder de WaveCode.LA

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Cerrar