Crea videojuegos con JavaScript utilizando Three.js

El mundo de los videojuegos es realmente inmenso, pero a muchos les aterra la idea de aprender lenguajes como C# para poder utilizar Unity.

Pero ¡hey! ¿En algún momento escuchaste que JavaScript está en todas partes? (hasta en la cocina) pues no es mentira, porque puedes usarlo para crear videojuegos en el navegador y en caso de que tengas experiencia en el mundo del desarrollo frontend te resultará aún muy sencillo aprenderlo.

Podrás combinar Three.js con frameworks y librerías superconocidas como React, Vue o Angular ¿Te imaginas convertir tu portafolio en un juego de video?

Cómo dar tus primeros pasos con Three.js

Existen dos formas de usar Three.js

• Integrando la librería mediante un cdn en un script
• Con npm

En este blog te enseñaré a hacerlo de la segunda manera, la cual es la más completa para que no tengas ningún problema a la hora de profundizar tus conocimientos con esta herramienta.

Esta configuración la estaremos ocupando en futuros blogposts

1️⃣ Instala las dependencias

El primer paso es instalar Three.js y webpack para poder manipular correctamente esta librería.

Inicializa npm

npm init -y

Instala Three.js

npm install three

Instala Webpack

npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin css-loader style-loader

💡 La razón de ocupar los loaders de estilos y el html-webpack-plugin es para tener libertad a la hora de realizar algunos ajustes como agregar más información y brindarle ese estilado. Pero si tu objetivo es solo producir un videojuego sencillo, puedes omitirlos.

2️⃣ Configura Webpack para Three.js

La siguiente configuración será muy similar a la que tenemos en aplicaciones web porque estaremos tratando a three.js como una dependencia normal (nada especial)

// webpack.config.jsconst path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "/",
  },
  mode: "development",

  // Este módulo es totalmente opcional, ya que solo lo usamos para// cargar correctamente los estilosmodule: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
    }),
  ],

  // La configuración de nuestro servidor de desarrollo para ver// los cambios en tiempo real
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    compress: true,
    port: 8080,
    hot: true,
  },
};

3️⃣ Crea tu primera escena

Para que puedas ver todo el potencial de esta herramienta primero debes definir ese lugar donde se van a renderizar todos los elementos (personajes, objetos, luces). Dentro del archivo index.js te propongo hacer lo siguiente

// Vamos a importar los siguientes elementos que vienen por defecto// más adelante veremos la función de cada unoimport {
  Scene,
  PerspectiveCamera,
  WebGLRenderer,
  SphereGeometry,
  MeshBasicMaterial,
  Mesh,
  Color,
} from"three";

// Crear la escena es tan sencillo como solo hacer una instancia de "Scene"const scene = new Scene();

Bien, la escena la tenemos generada. Ahora hace falta que definas tu cámara y no una para tomar fotos, sino una especial con la que podrás visualizar la escena y que podría funcionar como tus ojos.

Haremos una instancia de PerspectiveCamera, pero le pasaremos los siguientes argumentos

• Campo de visión. Esto será muy relevante para la experiencia de tus jugadores, entre menos campo de visión tenga podrá tener una pantalla con mayor acercamiento y viceversa. Recuerda: a mayor fov menor zoom tendrá la cámara
• Aspect ratio. La relación entre el ancho y alto de la imagen, el cual se obtiene al dividir los mismos
• near. Hasta qué punto podemos ver los objetos cercanos
• far. Hasta qué punto podemos ver los objetos lejanos

Inmediatamente después de crear la escena pondrás la cámara

// Para este ejemplo usaremos los siguientes valores pero eres// libre de editarlo para poder comprender más a fondoconst camera = new PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

4️⃣ Genera los objetos de tu escena

Si hacemos el render de todo lo anterior tendríamos… una pantalla negra 😔 porque aún nos falta agregar elementos, todavía falta mucho por resolver.

¿Qué te parece si creamos algo sencillo? Podría ser un efecto que parezca que una pelota se acerca y aleja (lo avanzado lo dejamos para otro blogpost 👀)

Generar objetos 3D en Three es muy sencillo, únicamente necesitarás el objeto, el material y la red, y esta última unirá a ambos.

// Nuestra geometría será la forma de nuestro objeto// en este caso ocuparemos la clase de la esfera// le tenemos que pasar el radio y los segmentos que// tendrá de ancho y altoconst geometry = new SphereGeometry(15, 32, 16);
// El material tiene muchas opciones pero en este caso// solo definiremos el colorconst material = new MeshBasicMaterial({ color: "#94c63d" });

// Para que nuestra esfera pueda existir tenemos// que crearla con la Mesh juntando la geometría y// su materialconst sphere = new Mesh(geometry, material);

// al final la agregamos a escena para poder verla
scene.add(sphere);

// Para poder visualizar la esfera vamos a alejar la cámara// en el eje z, recuerda que trabajamos con 3 dimensiones
camera.position.z = 30;

5️⃣ Origina el render

Todo existe dentro la memoria de JavaScript y llegó el momento de hacer un render con WebGL y verlo en pantalla, no te preocupes; lo importamos en el primer paso.

WebGL es una API nativa de JavaScript que nos ayuda a renderizar gráficos en 2D y 3D en el navegador

const renderer = new WebGLRenderer();
// Definimos el tamaño que vamos a utilizar, en este caso// será toda la pantalla
renderer.setSize(window.innerWidth, window.innerHeight);
// Y lo pasamos como un elemento del DOM a nuestro bodydocument.body.appendChild(renderer.domElement);

// Por último creamos la función animate que será un bucle infinitofunctionanimate() {
  requestAnimationFrame(animate);
  // Jugando con estos parámetros crearemos un efecto para que// la esfera parezca que se acerca y se aleja
  sphere.translateY(0.04);
  sphere.rotation.x += 0.01;
  sphere.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();

Este es el resultado 👇🏻 ¿Te parecen familiares los colores?

Todo el código completo lo puedes ver en ese repositorio

Este es solamente el primer paso para que empieces con esta librería de código, pero si quieres tomar otras alternativas dentro de Platzi ingresa a la Escuela de videojuegos. Allí encontrarás cómo crear tus propios modelos de juegos de video y preparar un pitch de negocios para asegurar una posible inversión.

Añade en la sección de comentarios qué te pareció esta herramienta y si te gustaría leer una guía un poco más avanzada sobre este tema. y únete a la comunidad de la Escuela de Videojuegos en Telegram.

#NuncaParesDeAprender