Scribd Logo
Unggah

Selamat datang di Scribd!

  • Introducción A Three

    Diunggah oleh

    Lorenzo Lopez Cerros
    31 tayangan8 halaman

    Judul Asli

    Introducción a Three

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    31 tayangan8 halaman

    Introducción A Three

    Diunggah oleh

    Lorenzo Lopez Cerros

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 8

    Introduccin a Three.

    js, la librera 3D nmero uno para HTML5

    Comentarios 5 Me gusta 0 Three.js es una librera bastante liviana y muy eficiente para generar y animar grficos en 3D dentro del navegador, aprovechando las grandes novedades que nos ofrece HTML5 para la generacin de contenidos multimedia. Aprovecha tanto las capacidades de HTML5 que es capaz de generar escenas 3D con WebGL, Canvas (2D) y SVG. Su cdigo est disponible en GitHub y en su web podemos encontrar ejemplos alucinantes de lo que se puede a llegar a hacer con Three.js.

    Posibilidades de diseo
    Three.js no es popular solo porque es simple a la hora de usarlo a travs de JavaScript, sino porque tiene un equilibrio perfecto entre el diseo y la programacin.

    Permite, entre otras cosas, importar archivos 3D a partir de Blender o Maya, pudiendo generar terrenos u objetos totalmente complejos y de gran calidad. La librera tambin incorpora potentsimos shaders que se pueden personalizar con OpenGL Shading Language (GLSL). Y sin duda incorpora todo lo necesario para crear escenas 3D, como son la posibilidad de manipular luces, cmaras, animar objetos, perspectivas, control de visualizaciones y mucho ms.

    Conceptos bsicos
    Antes de empezar, vemos el siguiente ejemplo simple que podremos realizar fcilmente tras haber visto los conceptos bsicos. Lo primero que tenemos que tener es nuestro archivo HTML listo para insertar la ventana donde se visualizar todo el 3D, de una forma muy simple, ya que el objeto del Canvas nos los genera Three.js. Lo primero es descargar la librera para poderla usar, que pesa unos 300kb. Para realizar la prueba haremos que la visualizacin ocupe toda el espacio del navegador y lo haremos mediante CSS.
    <!DOCTYPE html> <html> <head> <script src="lib/three.min.js"></script> <style> canvas { position: fixed; top: 0; left: 0; right: 0; bottom: 0; } </style> </head> <body>

    <script src="script/main.js"></script> </body> </html>

    Creando la escena
    Para interactuar con Three.js lo haremos a travs del objeto THREE, que nos brinda todos los elementos necesarios. Lo primero de todo es generar el renderizador, que en este caso usaremos el de WebGL, que es el ms completo. Posteriormente le daremos las dimensiones de la pantalla y lo aadiremos al documento. Al igual que ahora lo aadimos directamente al body y con las dimensiones de la pgina, podramos aadirlo en cualquier lugar y con cualquier dimensin.
    WIDTH = window.innerWidth; // Ancho de pantalla HEIGHT = window.innerHeight; // Alto de pantalla

    // Lienzo u objeto encargado del renderizado var lienzo = new THREE.WebGLRenderer();

    // Establecemos las dimensiones del lienzo lienzo.setSize( WIDTH, HEIGHT );

    // Aadimos el lienzo a la pgina document.body.appendChild(lienzo.domElement);

    Y ahora tenemos que crear la propia escena, que se encarga de almacenar todos los elementos que posteriormente visualizaremos.
    // Creamos la escena var escena = new THREE.Scene;

    Aadiendo objetos
    Ahora que ya tenemos lo bsico creado aadiremos un elemento bsico a la escena, en este caso un cubo o prisma. Pero la forma de tratar los objetos es muy similar, por lo que podramos crear una esfera de la misma forma prcticamente. Primero crearemos un objeto CubeGeometry al que le daremos un tamao, y solo sirve como forma para generar el prisma. Posteriormente crearemos un material con MeshLambertMaterial, que podra contener texturas, pero en este caso ser de color lila.
    // Creamos un prisma var geometriaCubo = new THREE.CubeGeometry( 100, // Dimensiones en eje X 140, // Dimensiones en eje Y 100 // Dimensiones en eje Z );

    // Creamos una apariencia (de lila claro) var aparienciaLila = new THREE.MeshLambertMaterial({ color: 0x9999FF // Color hexadecimal });

    // Generamos el prisma y le aplicamos la apariencia var cubo = new THREE.Mesh(geometriaCubo, aparienciaLila);

    Lo ltimo, cuando creamos cualquier elemento, es aadirlo a la propia escena que habamos creado.
    // Aadimos el cubo a la escena escena.add(cubo);

    Cmara
    Para poder visualizar una escena debemos de tener una cmara que nos de la visin de los elementos. En la prctica no es mucho ms diferente que cualquier otro elemento, ya que lo podemos mover y rotar igual que podemos hacer con un prisma, por ejemplo.

    Three.js dispone de distintos tipos de cmara, pero la que hace la visualizacin ms realista esPerspectiveCamera, por lo que no tendramos que necesitar mucho las dems. La cmara nos permite establecer el ngulo de visin (estando entre los 40 y 50 un ngulo natural), la relacin entre el ancho y el alto y el rango de alcance de la vista (si un elemento est ms lejos de eso desaparecer).
    // Generamos la cmara var camara = new THREE.PerspectiveCamera( 45, // Campo de visin (WIDTH / HEIGHT), // Proporcion 0.1, 10000 // Campo de visin );

    // Situamos la cmara camara.position.y = 160; // Elevamos la cmara camara.position.z = 400; // Alejamos la cmara

    Tambin la cmara dispone de un mtodo para centrar su visin a un objeto, y es lo que haremos para ver claramente el prisma. Tambin aadimos la cmara a la escena.
    // Centramos la vista en el cubo camara.lookAt(cubo.position);

    // Aadimos la cmara a la escena escena.add(camara);

    Ahora ya podramos visualizar la escena a travs de la ventana o renderizador que ya creamos al principio. Aunque en el cdigo final no se visualiza en este paso, esta sera la forma.
    // Renderizamos la escena lienzo.render(escena, camara);

    Simplemente le hemos pasado la escena y la cmara con la que vamos a ver la escena. Tambin se podra usar otra cmara o mostrar dos vistas distintas de la misma escena con mucha facilidad. El resultado, antes de aplicar las luces es el siguiente.

    Iluminacin
    Para poder ver con claridad los colores de la escena necesitamos aadirle luz, que acta de forma similar a una cmara, pero en lugar de darle parmetros de visualizacin le pasaremos un nmero (en hexadecimal, pero numrico). Tambin tenemos que darle una posicin, al igual que con la cmara (aunque en este caso por el mtodo directo) y aadirla a la escena. En este ejemplo voy a aadir dos luces, una rojiza y otra azulada.
    // Creamos una par de focos de luz var luz1 = new THREE.PointLight(0xff0044); // Rojizo luz1.position.set( 120, // Posicin en eje X 260, // Posicin en eje Y 100 // Posicin en eje Z );

    var luz2 = new THREE.PointLight(0x4499ff); // Azulado

    luz2.position.set( -100, // Posicin en eje X 100, // Posicin en eje Y 200 // Posicin en eje Z );

    // Aadimos las luces escena.add(luz1); escena.add(luz2);

    Tras aadir las luces si le enviamos la imagen al render veramos lo siguiente.

    Animar la escena
    Three.js nos facilita una funcin para ejecutar de forma correcta la escena, creando un nuevo fotograma cuando est disponible el equipo. Es decir, si se pilla la ejecucin o se ralentiza el equipo no se animar el siguiente fotograma, lo que ayuda a mejorar la estabilidad (de nada sirve sobrecargar la pgina si ya esta pillada). Esta accin la haremos con requestAnimationFrame que funciona de forma similar a unsetTimeout, al que le tenemos que pasar una funcin y el tiempo lo determina solo. En este ejemplo que estamos realizando haremos rotar a nuestro prisma (en el eje Z de forma continua y en el eje Y oscilando).

    Al final de mover los elementos hacemos la peticin de nuevo con requestAnimationFrame.


    x=0; // Lo usamos para la oscilacin

    function renderizar(){ // Rotamos el cubo cubo.rotation.y += Math.PI * 0.5 / 180; // ngulo en radianes cubo.rotation.z += Math.PI * Math.cos(x++ / 50) / 180; // Renderizamos la escena lienzo.render(escena, camara); // Volvemos a renderizar requestAnimationFrame(renderizar); }

    // Empezamos a renderizar renderizar();

    El resultado final es el siguiente y podis consultar el cdigo completo en GitHub.

    Resumen
    Esto es solo la punta del iceberg, tras Three.js hay un mundo con infinitas posibilidades y que cada da est dejando ver mejores ejemplos de uso. Y sin duda deja la puerta abierta a los videojuegosserios e indies para hacerse un hueco en todas las plataformas de un plumazo.

    Anda mungkin juga menyukai