Noticias

Ejemplos del libro uno.


 

Des de aquí podéis acceder a los ejemplos del libro. Para los que habéis comprado el libro, podéis descargarlos en el siguiente enlace: https://www.thefiveplanets.org/b01/b01samples.zip.

C1 – THREE.JS: PRIMEROS PASOS



Hello world

En este ejemplo veremos cómo crear una escena básica, y dotarla de animación. Nos servirá de base para introducir los conceptos más importantes de Three.js. Muestra un cubo que rota sobre su eje X,Y que se desplaza de derecha a izquierda y viceversa.



Los vértices

Este ejemplo sirve para introducir el concepto de los vértices. En él vemos un cubo con los vértices resaltados con pequeñas esferas rojas.



Las caras

El ejemplo muestra las caras de un cubo resaltadas con distintos colores. Nos sirve para introducir el concepto de las caras.



Crear una geometría personalizada

En esta URL podemos ver como crear una geometría básica, indicando la lista de los vértices, y de las caras que la forman.



Las cámaras

Este ejemplo ilustra el uso de la cámara en perspectiva vs la cámara isométrica (THREE.PrespectiveCamera vs THREE.OrthographicCamera).



CanvasRenderer

El código ilustra el uso del CanvasRenderer vs el WebGLRenderer. El CanvasRenderer no utiliza el Api de WebGL, por lo que permite ejecutarse en más dispositivos y versiones antiguas de los navegadores, pero tiene un peor rendimiento.



CSS3Renderer

Esta URL muestra cómo utilizar el Css3Renderer. Este render en vez de usar el Api del Canvas HTML para representar los objetos 3D, utiliza directamente los elementos HTML aplicando estilos CSS.



Escala y añadir objetos dentro de otros

Muestra el ejemplo inicial, pero en él se introduce el concepto de la escala, de forma que el cubo, al tiempo que va girando sobre sí mismo, cambia de tamaño. También se introduce el concepto de añadir un objeto dentro de otro, en lugar de añadirlo en la escena, de esta forma los objetos hijos se mueven junto con el padre, sólo cambiando la posición del padre.



Rotar objeto alrededor de un punto

El código muestra como rotar un objeto alrededor de un punto, en lugar de girar sobre su eje.

C2 – TREEJS: PREPARANDO EL ENTORNO DE DESARROLLO

Error en la carga de texturas

Cuando desarrollamos soluciones con Three.js la forma más simple para probar los resultados es abriendo el fichero local con el navegador. Esta solución no funcionará en todos los casos, generando un error de seguridad cuando cargamos texturas con imágenes. Este ejemplo provoca el error de seguridad si se abre localmente.

Estadísticas

El rendimiento es un punto vital en la animación 3D y el mundo de los videojuegos. Aquí mostramos como obtener estadísticas de los frames mostrados por segundo, del consumo de memoria, y las milésimas de segundo consumidas en renderizar una escena.

Controles personalizados

En este enlace aprendemos como crear controles personalizados, que nos permitan en tiempo real alterar el comportamiento de nuestras animaciones.

Detectar soporte WebGL

Con este script vemos como determinar si el navegador con el que ejecutamos nuestra aplicación soporta el API WebGL. De esta forma para dispositivos antiguos o navegadores poco potentes podemos dar una respuesta distinta.

C3 – THREEJS: GEOMETRÍAS, MATERIALES, LUCES Y SOMBRAS

Geometrías 3D predefinidas

En este ejemplo aprenderemos a usar las geometrías básicas que por defecto nos ofrece Three.js (el cubo, la esfera, los poliedros, el cilindro, el cono, el torus y el nudo).

Geometrías 2D predefinidas

Con este script vemos cómo usar algunas de las clases para crear geometrías planas (el plano, el círculo, el polígono y el anillo).

Figura plana personalizada 1

Con este ejemplo vemos como crear una figura plana, indicando una lista de puntos (x,y), de forma que se traza una línea de punto a punto siguiendo el orden de la lista.

Figura plana personalizada 2

El ejemplo es igual que el anterior, pero en lugar de crear la estrella indicando la lista de puntos, usamos instrucciones para ir moviendo un puntero imaginario e ir dibujando líneas rectas, arcos,….

Figura plana personalizada con agujeros

Para figuras planas más complejas disponemos de la propiedad holes que nos permite crear agujeros en su superficie. Los agujeros en realidad son figuras planas que creamos igual como hemos visto. Partiendo del ejemplo anterior, en la estrella dibujamos un agujero circular.

Figuras planas personalizadas

En este ejemplo utilizamos las distintas técnicas para crear figuras planas que hemos visto para crear varias geometrías personalizadas (des de una cara, un pez, la estrella,…).

Dar volumen a una figura planas

En este ejemplo vemos como dar volumen a las figuras planas que hemos definido usando la clase THREE.ExtrudeGeometry.

Texto en 3D

Una funcionalidad de Three.js, es que permite crear textos en 3D fácilmente. Para ello necesitamos una fuente en formato (typefaced), lista para ser usada en Three.js. El código muestra cómo generar textos en tres dimensiones.

THREE.MeshBasicMaterial

El ejemplo ilustra el uso del material THREE.MeshBasicMaterial. Este material no está afectado por la luz y las sombras, por lo que es visible sin necesidad de añadir luces. Muestra un color solido uniforme o bien líneas solidas uniendo los vértices (whireframe).

THREE.MeshNormalMaterial

Este material, igual que el anterior, no está afectado por la luz y las sombras, por lo que es visible sin necesidad de añadir luces. La superficie del objeto varia de color entre las tonalidades (rojo, verde, y azul) según la magnitud de los valores X/Y/Z del vector normal.

THREE.MeshDepthMaterial

La superficie se muestra con un color gris, que se oscurece o aclara según la distancia de la cámara. Se suele utilizar en el momento de diseñar las escenas, antes de aplicar texturas más elaboradas.

THREE.MeshLambertMaterial

Con este material la superficie del objeto es afectado por las luces, de forma que se oscurece o aclara según la distancia de la luz, pero no genera brillos. Para poder visualizarlo es necesario que haya alguna luz incidiendo sobre la superficie, en caso contrario aparecerá de color negro.

THREE.MeshPhongMaterial

Este material es el más usado para la representación final de las escenas, ya que es afectado por la luz, oscureciéndose por las sombras y también generando brillos. Por ejemplo una luz blanca incidiendo directamente sobre el objeto, producirá reflejos, mientras que las partes poco expuestas a la luz se oscurecerán.

THREE.MultiMaterial

Este material, en realidad es un array de otros materiales primarios, de forma que puedes indicar que material quieres para cada superficie.

Textura básica

El ejemplo sirve para introducir el concepto de textura. El cubo giratorio que hemos usado en ejemplos anteriores lo hemos modificado para que en lugar de un color sólido presente una imagen en cada cara.

Objetos con múltiples texturas

En este ejemplo muestra como combinar varias texturas en una misma figura. Para ello proporcionamos una lista de seis materiales con unas texturas distinta para cada material.

Mapeado UV

Crear y cargar una imagen para cada cara de nuestro modelo se convierte en muy poco práctico cuando aumenta el número de caras. Partiendo del ejemplo anterior, mostramos como usar una sola imagen de textura, pero indicando que parte de la imagen debe usarse en cada cara.

Repetir texturas

Muchas veces nos encontraremos con la necesidad de repetir la misma textura sobre una superficie. En este ejemplo hemos creado una pared de ladrillos y un suelo de parqué, partiendo de dos imágenes, y repitiéndolas por la superficie.

Texturas transparentes

Este ejemplo muestra cómo usar imágenes con transparencias. Concreta-mente creamos varios planos con la textura de una planta y fondo transparente, y los cruzamos entre sí para ilustrar el efecto.

Iluminación de ambiente (THREE.AmbientLight) y direccional
(THREE.DirectionalLight)

La luz de ambiente ilumina todas las caras de los objetos que haya en la escena, estén donde estén. La iluminación direccional es como la luz del sol. Los rayos de luz van en paralelo unos respecto a los otros. El ejemplo muestra los dos tipos de luces.

Luz Hemisférica (THREE.HemisphereLigh)

La luz solar es reflejada por la tierra que a su vez vuelve a rebotar en la atmósfera, mientras que otra parte se dispersa por la atmósfera. El resultado es una luz muy suave que viene de una gran cantidad de direcciones. En Three.js, podemos crear algo similar con THREE.HemisphereLight.

Punto de luz (THREE.PoinLight) y Luz focal (THREE.SpotLight)

Estos tipos de luces están pensados como luces que provienen des de un punto en el espacio y actúan como se fueran bombillas o focos. Ambas luces soportan la proyección de sombras.

Luz focal (THREE.SpotLigth)

En este ejemplo analizamos con más detalle la luz focal.

Sombras

Solo algunas luces son capaces de proyectar sombras. THREE.AmbientLight y THREE.HemisfereLight son luces de soporte que no generan sombras, mientras que THREE.DirectionalLight, THREE.PointLight y THREE.SpotLight sí que proyectan, siempre que esta funcionalidad se active explícita-mente. El ejemplo muestra cómo generar sombras usando estas luces.

C4 – THREEJS: CREANDO NUESTRO MUNDO

Formato .OBJ (THREE.OBJLoader y THREE.MTLLoader)

Un estándar ampliamente soportado es el formato .OBJ. Con este formato, el modelo es descrito con dos archivos distintos. Un fichero *.obj que define la geometría y un fichero .mtl que define el material, además de los ficheros de textura (*.png, jpg). En este ejemplo vemos como cargar una torre.

Cargar una casa

El ejemplo es similar al anterior, pero ilustramos como manipular el objeto para alterar sus propiedades una vez cargado.

Formato collada .DAE (THREE.ColladaLoader) y animaciones de objetos

Collada (COLLAborative Design Activity) es un formato abierto definido mediante XML pensado para la representación de escenas en 3D. Para ilustrar la carga de objetos collada hemos creado un pequeño ejemplo donde cargamos uno de los monstruos que usaremos en el juego. Un perro alienígena con una única animación para simular el andar.

Formato nativo de three.js

El formato nativo de Three.js es representado con JSON. Para ilustrar su uso hemos exportado el modelo de la casa que hemos usado anteriormente al formato JSON.

Niebla lineal

La niebla se vuelve más densa de forma lineal, igual como pasa con el fenómeno atmosférico. Este ejemplo muestra cómo usar la niebla para conseguir que los elementos aparezcan progresivamente, y evitar el efecto de aparición súbita.

Niebla exponencial

La niebla se vuele más densa de forma exponencial. Este ejemplo muestra cómo usar la niebla exponencial.

JUEGO – Crear un suelo básico

En este punto ya tenemos suficientes conocimientos para crear la base del juego que nos permitirá definir la primera localización del mapa. En este ejemplo creamos la estructura base de nuestro juego, a la vez que presentamos la técnica más simple para crear un suelo.

JUEGO – Crear un cielo con un cubo (Skybox)

En este ejemplo analizamos como crear un cielo usando la técnica skybox. Para ello usamos un cubo que envuelve la escena, cada una de las seis caras del cubo muestra una parte del cielo.

JUEGO – Crear un cielo con una esfera (Skydome)

Vamos a representar el cielo con una esfera que envolverá el escenario en lugar de usar un cubo como en el ejemplo anterior. Para esta técnica usamos una sola imagen.

JUEGO – Crear un cielo con una esfera y con un degradado

Otra forma para crear el cielo es usar una esfera, pero en lugar de usar una imagen, usaremos un degradado de colores. El ejemplo muestra una versión muy simple de esta técnica.

JUEGO – Usar THREE.Sprite para crear hierva y arboles

Un componente importante en los juegos y las escenas en 3D es la representación de la vegetación. Representar amplios prados y bosques mediante modelos 3D detallados no es viable debido a la caída de rendimiento. En este ejemplo vemos una técnica usando SPRITES.

JUEGO – Usar planos para crear hierva

Otra técnica para representar hierba es mediante planos que se cruzan, ello reduce enormemente el número de polígonos. Este ejemplo muestra cómo conseguir este efecto para poblar una amplia zona.

JUEGO – Crear el mapa del juego

Ya hemos visto como cargar modelos 3D, añadirlos a la escena, y clonarlos en caso de desear repetirlos en una misma composición. En este punto iremos un poco más allá y veremos una forma de crear extensos mapas modulares.

JUEGO – Crear una barra de progreso y una pantalla de carga

Continuando con el ejemplo anterior, lo mejoraremos para incluir una SplashScreen, y una barra de progreso que muestre al usuario los pasos que se van realizando para cargar el mapa y los modelos usados en el juego.

JUEGO – Añadir aldeanos y crear sus rutinas de la vida diaria

Hasta ahora hemos visto como cargar elementos estáticos en nuestras escenas, incluso a cargar un modelo con una animación. En este ejemplo veremos cómo cargar varios modelos animados simultáneamente, y crear una primera versión de la inteligencia artificial. Para ello incluiremos varios aldeanos y crearemos sus rutinas de la vida cotidiana.

JUEGO – Añadir monstruos y crear su inteligencia artificial

Partiendo del ejemplo anterior, además de añadir los aldeanos, en la zona del bosque hemos incluido los enemigos. Para moverlos hemos usado una inteligencia muy básica que los mantiene dentro de un área concreta.

C5 – THREEJS: EXPLORAR E INTERACTUAR

JUEGO – Añadir el control del jugador por teclado y ratón

Hasta ahora en los ejemplos hemos movido la cámara a través de un camino prefijado. Partiendo de este controlador lo hemos modificado para mover la camera manualmente con el teclado y el ratón, y simular una visión en primera persona, para nuestro juego.

FirstPersonControls.js.

FirstPersonControls.js ofrece una visión en primera persona, permitiendo controlar la cámara mediante el teclado y el ratón. Las teclas WASD o las flechas permiten el movimiento hacia Adelante/Izquierda/Atrás/Derecha, mientras que con “R” nos desplazamos hacia arriba y con “F” hacia abajo. Para mirar alrededor usamos el ratón. Es usado habitualmente para los juegos de disparos en primera persona

FlyControls.js.

Ofrece una visión que simula la levitación. Con las teclas WASD permiten el movimiento hacia Adelante/Izquierda/Atrás/Derecha, mientras que con “R” y “F” nos movemos hacia arriba y hacia abajo. Con “Q” y “E” giramos la pantalla. Con el movimiento del ratón o con las flechas giramos para simular el movimiento de la cabeza. Con el botón izquierdo del ratón avanzamos y con el botón derecho retrocedimos.

OrbitControls.js.

Este control está especialmente pensado para las pantallas táctiles. Nos permite controlar la escena mediante el ratón o bien con los dedos en una pantalla táctil. Pulsando el botón izquierdo del ratón y moviéndolo, o arrastrando un solo dedo permite rotar la escena. Pulsando el botón central del ratón o la rueda de scroll, o usando dos dedos sobre la pantalla podemos ampliar o reducir la escena. Mientras que pulsando el botón derecho del ratón o bien las fechas, o con tres dedos para la pantalla táctil, movemos la cámara hacia arriba, abajo, izquierda o derecha. Es usado habitualmente para examinar y rotar un único objeto, permitiéndolo ver des de todos los ángulos.

TrackballControls.js.

Este contol es muy parecido al anterior, como difrencia principal es que no permite el control de la cámara mediante el teclado, sino únicamente por el ratón o mediante la pantalla táctil. Por lo que es especialmente útil cuando en una misma pantalla disponemos de varios CANVAS. Por ejemplo en una tienda donde cada producto se muestra en 3D y podemos girarlo individualmente, sin afectar al resto.

Detección de movimiento vía Webcam.

En este ejemplo aprenderemos cómo usar la webcam para detectar el movimiento del usuario, que podrá interactuar con nuestra página web sin necesidad de teclado ni ratón.

JUEGO – Detección de movimiento vía Webcam.

En este ejemplo aprenderemos cómo aplicar la técnologia anterior para que pueda controlar el juego sin necesidad de teclado ni ratón.

HTML5 – Control vía Gamepad.

Un punto importante al crear un videojuego es decidir la forma como controlamos nuestros juegos. Actualmente con la popularización de las consolas (Xbox, PlayStation, Wii,…) muchos usuarios se han habituado a usar los Gamepads y Joysticks para este fin. En este ejemplo aprenderemos cómo usar el API de HTML5 para usar estos dispositivos.

JUEGO – Control vía Gamepad.

En este ejemplo aprenderemos cómo aplicar la tecnología anterior para que pueda controlar el juego con un gamepad. Con el joystick pulgar de la izquierda nos moveremos hacia adelante, atrás, derecha e izquierda, mientras que con el joystick de la derecha giraremos la cámara hacia los lados. Pulsando el botón 6 al mismo tiempo que nos desplazamos aceleraremos la velocidad, simulando el hecho de correr.

Seleccionar objetos y clickar – RAYCASTER.

En este apartado aprenderemos como seleccionar y clickar sobre objetos usando el ratón o el dedo sobre una pantalla táctil. Para ello, partimos de un ejemplo con una escena llena de cubos grises. Al mover el ratón por la pantalla el cubo situado debajo del cursor se iluminará de rojo, en caso de haber más de uno, solo se seleccionará el más cercano a la pantalla. Al pulsar con el botón izquierdo del ratón sobre el cubo seleccionado cambiará de color a una tonalidad azul verdosa.

Arrastrar y soltar – RAYCASTER.

En este apartado iremos un poco más lejos que el anterior y no solo controlaremos la selección de objetos y pulsación sobre objetos, sino que también permitiremos arrastrarlos y soltarlos sobre otro objeto.

Interactuando con los elementos del juego

En esta versión del juego hemos añadido baúles, pócimas y otros objetos en el juego, con los que poder interactuar.

Pantalla completa (API HTML5 Full screen)

En este ejemplo vemos como usar el API para solicitar el visionado en pantalla completa.

Bloqueo del puntero del ratón (Pointer Lock API)

En este ejemplo vamos un poco más lejos y vemos como usar el bloqueo del puntero del ratón.

Pantalla completa y bloqueo del ratón aplicado al juego

En este ejemplovemos como usar el bloqueo del puntero del ratón en el juego.

C6 – THREEJS: PROXIMOS LIBROS DE LA COLECCIÓN

JUEGO – Gestión de la detección de colisiones.

Este ejemplo ilustra cómo implementar de forma simple la detección de colisiones, generando una definición paralela del mundo mucho más simple. Las distintas figuras son encapsuladas dentro de cubos, de forma que detectamos las colisiones no sobre los modelos 3d, sino sobre los cubos.

JUEGO – Creación de una interfaz rica para el juego.

En este ejemplo nos adelantamos un poco, mostrando una forma de crear una interfaz gráfica. En el ejemplo nos hemos apoyado en jQuery para simplificar un poco la sintaxis.

  1. Jordi,
    Salen unas lineas azules en (por ejemplo) 09-skysdome.html. Porque?
    por lo demás muy interesante. Compre el libro lo tengo hace 2 semanas y me ha ayudado mucho, mucho. Nunca me atreví a iniciar RPG en 3D. Estoy en RPG maker MV y me encanta crear juegos con el. Pero esto del 3d directo al navegador es magnífico porque se basa en estandares.

Deja un comentario

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