Construye tu propio juego de física webgl

Sep 12, 2025

Cómo

[dieciséis]

Este proyecto se dividirá en diferentes partes. Daremos una breve introducción a Heroku, muestre cómo usar Physijs con Three.js, explique cómo manejar eventos de zócalo a través de nodos.js y también cómo vamos a manejar los datos enviados.

20 Ejemplos increíbles de WebGL en acción.

01. Heroku

Heroku is an easy to use and free to trial node.js web server

Este proyecto será alojado en Heroku , que es una plataforma de nube para alojar sus aplicaciones. Tiene una amplia variedad de lenguajes soportados como Ruby, Java, PHP y Python. Vamos a utilizar node.js.

Regístrese para obtener una cuenta y elija NOde.js. Para este proyecto podemos usar el servidor básico, que es gratuito. Después de la inscripción, llegará a su tablero donde pueda crear su aplicación. Esto creará un subdominio en Herokuapp.com.

Como método de despliegue, puede elegir usar la interfaz de línea de comandos Heroku (CLI) para implementar utilizando su repositorio GIT, o tener una conexión configurada a GitHub o Dropbox. He elegido ir con su CLI; Esto requerirá una instalación. Pero a cambio, obtiene una variedad de nuevas herramientas útiles, una de estas es la depuración en vivo a través de su terminal.

Para configurar su servidor, le recomiendo seguir los pasos. Como se describe aquí .

Para implementar, use comandos de git predeterminados. Cada uno que usa activará el servidor de compilación y su aplicación se implementará en el servidor Heroku y luego se puede ver en su subdominio.

Una vez que se implementa el código, puede ver su proyecto en [YourProject] .Herokuapp.com. Para ver los registros, use el comando 'Heroku Logs - Tail' en su terminal. Algunas de las cosas que se muestran son lo que se está atendiendo al cliente: muestra las conexiones del socket, y si desea depurar su código, también podría usar la consola.log para que se envíe al terminal.

02. Construir la escena de la física.

Tap your screen or hit the spacebar to bounce the table up

Estaremos usando los más populares. Webgl marco de referencia, tres.js , para construir una escena 3D que contenga un objeto en el que adjuntaremos física. La biblioteca de física de elección es Fisijs , un complemento para tres.js. Como una extensión a tres.js, PHSIJS utiliza la misma convención de codificación, lo que facilita la utilización si ya está familiarizado con Three.js.

Lo primero es la mesa de billar. Estamos usando el Physijs Alturafieldmesh , porque esta malla leerá la altura de la avenopeometría. Así que básicamente se envolverá alrededor del objeto Three.js.

 VAR TablaGeometría = Nuevo Tres.PlaneEometría (650, 500, 10, 10);
Var TableTematerial = Physijs.Creatematerial (
  nuevo tres.meshphongmaterial ({
    Shininess: 1,
    Color: 0xb00000,
    Emissive: 0x111111,
    Lado: Three.Doubleside
  }),
  .8, // fricción
  .4 // Restitución
)
Tabla = Nuevo Physijs.HeightFieldMesh (Tabla de Tabla, Tablematerial, 0);

Asi que Alturafieldmesh Requiere una geometría, pero también un material de Physijs. Estamos agregando dos nuevas funciones al material Three.js. Esos son los fricción y restitución Variables. La fricción es la resistencia que el objeto hace, y la restitución se refiere a la "rebobnidad". Estas dos variables definirán lo real que se sentirá la física en su escena.

Para las bolas de piscina creadas, no queremos hacerlas demasiado hinchadas, así que mantén el número bajo. Como tres.js, Physijs también tiene una serie de formas básicas para recorrer la malla original. Esferme Envolviendo el EsferaFegeometría le dará la física de la pelota. Al inicializar la escena, llamamos. Builball (8) , que desencadenará la siguiente función ...

 var buildball = función (numberball) {
 var balltexture = nuevo tres.texture ();
 var ballindex = ball.length;

Añadir la textura:

 BallTexture = Three.Imageutils.loadTexture ('Textures /' + Numberball + '_ball.jpg', Función (imagen) {
     balltexture.image = imagen;
  });

Cree el material habilitado para Physijs con algunas propiedades decentes de fricción y rebote:

 var ballmaterial = fisijs.creatematerial (
    Nuevo tres.Meshlambertmaterial ({
      Mapa: Balltexture,
      Shininess: 10,
      Color: 0xDDDDDD,
      Emissive: 0x111111,
      Lado: Tres.Frontside
    }),
    .6, // fricción
    .5 // Restitución
  );

Mapeado de texturas:

 ballmaterial.map.Wraps = ballmaterial.map.wrapt = tres.repeatwrapping;
  ballmaterial.map.repeat.set (1, 1);
 Cree el Spheremesh habilitado para la física, y inicie en el aire:

  Ball [BallIndex] = New Physijs.Spheremesh (
    Nuevo Three.SphereEgeometry (25, 25, 25),
    Ballmaterial,
    100
  )
  // Despegue a la parte superior del lienzo
  bola [ballindex] .position.y = 500;
  // sombras
  Ball [Ballindex] .ReceivesHadow = verdadero;
  Ball [Ballindex] .castshadow = verdadero;
  // Añadir la pelota a tu lienzo
  escena.add (bola [ballindex]);
};

Estamos agregando textura desde un archivo .jpg. Crea el material y usa eso para el Esferme Para crear el objeto, que colocaremos verticalmente en la parte superior para que se caiga en la pantalla.

03. Conexión de sockets

The key goal of our game is emulating the physical movements to the screen

Para la comunicación entre el servidor y el cliente, estaremos usando socket.io . Esta es una de las bibliotecas más confiables disponibles para node.js. Está construido en la parte superior de la API de Websockets.

Ahora la física está habilitada para las mallas que necesitamos la entrada del usuario para que el juego sea interactivo. El dispositivo de entrada que estamos usando es el dispositivo móvil. El navegador móvil es el controlador que proporcionará datos. Del acelerómetro y giroscopio. al escritorio donde verás el juego.

En primer lugar, se debe realizar una conexión entre el navegador móvil y el navegador de escritorio. Cada vez que un navegador se conecta con nuestra aplicación node.js, necesitamos hacer una nueva conexión. Se configura una conexión lateral del cliente utilizando lo siguiente:

 var socket = io.connect ();

Para enviar mensajes usas el emitir función:

 Socket.Emit ('Nombre del evento', datos);

Y para recibir usted use el .en() función:

 socket.on ('nombre de evento', función () {});

03.1. Configuración del juego de escritorio

Si estamos en un escritorio, le enviaremos a nuestros sockets un dispositivo que emite a nuestro servidor, el escritorio es el juego utilizando la siguiente línea de código:

 var socket = io.connect ();
// Cuando el mensaje de bienvenida inicial, responda con el tipo de dispositivo 'Game'
Socket.on ('Bienvenido', función (datos) {
  socket.emit ("dispositivo", {"tipo": "Juego"});
});

El servidor nos devolverá un código de clave / juego único generado por crypto . Esto se mostrará al escritorio.

 // generar un código
var gamecode = crypto.randombytes (3) .Tostrando ('hex'). Subtrucción (0, 4) .tolowercase ();
// asegurar una singularidad
Mientras (GameCode en SocketCodes) {
  gamecode = crypto.randombytes (3) .Tostrando ('hex'). Subtrucción (0, 4) .tolowercase ();
}
// Tienda Código de juego - & gt; asociación de zócalo
SocketCodes [GameCode] = io.sockets.sockets [socket.id];
Socket.Gamecode = GameCode

Dígale al cliente que inicialice y muestre el código del juego al usuario ...

 Socket.Emit ("Inicialize", GameCode);

03.2. Conectar Controller al juego

Para conectar el dispositivo móvil al juego, usaremos un formulario para enviar el código del juego desde la pantalla de escritorio. En el formulario, enviaremos el código del juego al servidor para la autenticación.

 Socket.Emit ("Dispositivo", {"Tipo": "Controlador", "GameCode": GameCode});

El servidor se verificará si el código de juego es válido y configurará la conexión con el juego de escritorio

 if (Device.Gamecode en Socket Codis) {
  // guardar el código de juego para los comandos del controlador
  socket.gamecode = dispositivo.gamecode
  // Inicializar el controlador
  Socket.Emit ("conectado", {});
  // comienza el juego
  SocketCodes [Device.Gamecode] .mit ("conectado", {});
}

Una vez que se establece la conexión, luego le daremos a la bola 8-bola un pequeño empujón de la X y Z con el siguiente comando ...

 bola  .setLineArvelocity (nuevo tres.vector3 (30, 0, 30));

04. Enviando datos

Ahora que se establece la conexión, queremos enviar las variables de Gyro y Acelerómetro al juego. Usando el ventana.ondevicemotion y el ventana.deviceorientación Eventos, tenemos los datos que necesitamos para emular los mismos movimientos de inclinación de nuestro teléfono a la mesa de billar. He elegido usar un intervalo de 100 ms para emitir esos valores.

 setinterval (función () {
  socket.emit ('Enviar gyro', [math.round (roty), math.round (rotx), ay, hacha]);
}, intervalo de intervalo);

En el lado del cliente, resolveremos la latencia al interpretar los valores entrantes del servidor a la inclinación de la mesa de billar. Para el acertado usamos TweENMAX .

 // manejar los datos de Gyro entrantes
Socket.on ('New Gyro', Función (DATOS) {
  var degy = datos  & lt; 0? Math.abs (datos ): -data ;
  Tweenmax.to (Table.Rotation, 0.3, {
    X: DEGTORAD (DEGY - 90),
    Y: DEGTORAD (DATOS ),
    Facilidad: lineal.easenone,
    ONUPDATE: FUNCIÓN () {
        Tabla .__ DirtyRotation = verdadero;
    }
  });
});

05. EVENTOS EXTRA

More balls equals more fun. Try hitting the spacebar or tapping the screen of your mobile

Para darle un poco más de interactividad, he agregado un par de eventos adicionales para que el usuario juegue. Vamos a dar al usuario la opción de agregar bolas adicionales junto a la bola de 8 bolas usando los números en el teclado.

Otro es para rebotar la mesa hacia arriba. Para esto puedes golpear la barra espaciadora. Pero también estamos agregando un evento de TAP en el dispositivo controlador. Esto enviará un evento a la mesa de billar, que subirá la mesa y enviará las pelotas.

Primero necesitamos atrapar los eventos del teclado ...

 // Crear bolas / tabla de golpe en la barra espaciadora
document.addeventlistener ('keydown', función (e) {
  if (E.Keycode == 49) {// Key: 1
    Buildball (1);
  } else OF (E.Keycode == 50) {// Key: 1
    Buildball (2);
  } else OF (E.Keycode == 51) {// Key: 1
    Buildball (3);
  } else OF (E.Keycode == 32) {// Key: Barra espaciadora
    Bouncetable ();
  }
});

los builball La función es la misma función que utilizamos para crear la esfera de 8 bolas. Solo estamos utilizando diferentes texturas que envolverán la esfera. Para empujar la mesa, le damos a la mesa un movimiento hacia arriba a lo largo del eje Y con este código ...

 Tabla.SetLineArvelocity (Nuevo Three.Vector3 (0, 500, 0));

Conclusión

Add more balls and see how much your browser can handle

Cuando tenga un concepto para un juego o cualquier otra cosa, es totalmente probable que haya bibliotecas por ahí que puedan hacer su vida más fácil. Esta es una demo que muestra cómo esto puede funcionar. Esperamos que esto ayude a provocar algunas ideas creativas o ayudarlo con su proyecto actual. Ver un ejemplo en vivo del juego. aquí , o encontrarlo en Github .

Este artículo fue publicado originalmente en el número 300 de neto , la mejor revista del mundo para diseñadores y desarrolladores profesionales web. Comprar problema 300 o Suscríbete aquí .

Artículos relacionados:

Comienza con Webgl usando tres.js
20 herramientas de JavaScript para volar tu mente
Crear imágenes 3D interactivas con tres.js

Construye tu propio juego de física webgl

01. Heroku

02. Construir la escena de la física.

03. Conexión de sockets

03.1. Configuración del juego de escritorio

03.2. Conectar Controller al juego

04. Enviando datos

05. EVENTOS EXTRA

Conclusión

Cómo - Artículos más populares

Cómo dibujar la perspectiva

¿Qué hay dentro de 8?

Construye un blog con cuadrícula y FlexBox

Cómo seleccionar con las herramientas de lasso de Photoshop

Modelo Una criatura alienígena pirata en Zbrush

Crea paisajes impresionantes en Houdini

Cómo crear una reina hada vívida

Crea un carácter peludo 3D desde cero

Categorías