Introducción a WhitestormJS

Whitestorm.js es un framework para desarrollar aplicaciones 3D y juegos que puedan ejecutarse en un navegador. Este framework basicamente integra la librería Three.js (tal y como jQuery integra DOM para facilitar su uso). Extiende Three.js mediante una simple API y un sistema de componentes para hacer que el desarrollo sea más ágil y sencillo. Utiliza WebGL para renderizar el 3D, por lo que la aplicación puede funcionar incluso en smartphones y tabletas.

Existen proyectos muy chulos hechos con Three.js. Aquí tenéis unos cuantos ejemplos:

Objetivo de WhitestormJS framework

El objetivo principal de WhitestormJS es combinar la representación 3D con simulaciones físicas en tiempo real mediante una API sencilla y flexible. Proporciona ciertas características como:

Componentes basados en scene graph
Físicas de alto rendimiento con Worker
Automatización de renderizado
Softbodies mejorados
Basado en ES2015+
Soporta Webpack
Motor de renderizado Three.js integrado

Puedes ver más características del proyecto en su README de github.

Instalación

Hay múltiples métodos de instalar whitestorm.js. Vamos a explicar cómo instalarlo mediante el tag <script> y mediante webpack.

Incluyéndolo en el documento

Lo único que debes hacer es añadir whitestorm.js a tu documento utilizando el tag script. Puedes descargarlo desde este enlace.

<!-- WhitestormJS library -->
<script src="whitestorm.js"></script>
<!-- App written in WhitestormJS -->
<script src="app.js"></script>

Y eso es todo. Ahora puede implementar tu app con whitestorm.js en app.js.

Webpack

Ejecuta npm install whs. Después de eso, añade el namespace WHS a tu código:

import * as WHS from 'whs';

// ...

El próximo paso es configurar webpack.

plugins: [
  new webpack.NormalModuleReplacementPlugin(/inline-worker/, 'webworkify-webpack')
  // ...
],

Esto solo puede hacerse si estás utilizando la versión con físicas. Puedes encontrar más información sobre las variaciones de whitestorm.hs y el uso de webpack en su documentación.

Uso

WHS. World

Ha llegado el momento de crear nuestra primera app con whitestorm.js. Lo primero que debes hacer es configurar el objeto World. Cuando hagas esto, puedes realizar múltiples cosas:

Configurar THREE.Scene (o Physijs.Scene)
Crear perspectivas de cámara y añadirlas a la escena
Definir la gravedad (si las físicas están activadas)
Aplicar un fondo y otras opciones de renderización
Definir el autoresize/stats

const world = new WHS.World({
  autoresize: "window",
  stats: 'fps', // Statistics tool for developers.

  rendering: {
    background: {
      color: 0x162129
    }
  },

  gravity: [0, -100, 0], // Physic gravity.

  camera: {
    position: {
      z: 50
    }
  }
});

El canvas WegGL se añadirá automáticamente al nodo document.body. Puedes cambiar el destino definiendo un elemento DOM a la propiedad container del objeto de configuración que le pasamos a WHS. World.

WHS.Sphere

Lo próximo que tenemos que hacer es una simple sphere que se caerá de un plano. Como ya tenemos la escena, la cámara y el renderizador configurado, podemos empezar haciendo la sphere inmediatamente. Para crear una sphere simple, utiliza el componente WHS.Sphere. Es un componente especial que integra THREE.SphereGeometry y físicas.

Por defecto, si utilizas la versión de físicas de whitestorm.js, todos los objetos son creados como objetos de física. Si no quieres tener un objeto de físicas, simplemente añade physics: false en la configuración de la sphere.

// const world = ...

const sphere = new WHS.Sphere({ // Create sphere comonent.
  geometry: {
    radius: 3,
    widthSegments: 32,
    heightSegments: 32
  },

  mass: 10, // Mass of physics object.

  material: {
    color: 0xF2F2F2,
    kind: 'basic'
  },

  position: [0, 10, 0]
});

sphere.addTo(world); // Add sphere to world.

Ahora abre tu documento en el navegador y verás la esfera en acción cayéndose.