Primeiros passos com o Whitestorm.js

O que é whitestorm.js?

Whitestorm.js

é uma estrutura para desenvolver
3D
aplicativos ou jogos que são executados no navegador. Essa estrutura é basicamente um invólucro em torno do
Three.js
biblioteca (como
jQuery
envoltórios
DOM
para facilitar o uso). Ele estende o Three.js

com API simples e sistema de componentes para tornar o desenvolvimento mais fácil e melhor. Ele usa
WebGL
para renderizar
3D
portanto, o aplicativo será executado mesmo em um smartphone ou tablet.

Exemplos
:
https://whs-dev.surge.sh/examples/

Há também alguns projetos interessantes feitos com o Three.js
já (showcase):

Ideia da estrutura WhitestormJS

Seu principal objetivo é combinar
3D
renderização com simulações de física em tempo real em um sistema simples e flexível
API
. Há alguns recursos principais que ele oferece:

• 
  
  Gráfico de cena baseado em componentes
• 
  Integrado
  física de alto desempenho
  com
Worker
  
  (Multithreading)
• 
  
  Automatização
  da renderização
• 
  Aprimorado
  corpos moles
• 
  
  Baseado em ES2015
• 
  
  
  Webpack
  
  
  
  amigável
• 
  
  Integrado
  
  
  Três.js
  
  mecanismo de renderização

Mais recursos podem ser encontrados no projeto

LEIAME no github

.

Instalação

Existem vários métodos de instalação
whitestorm.js
. Vamos descrever o que está usando o

<script>

e a tag com
webpack
.

Incluindo o documento

A única coisa que o senhor deve fazer é adicionar
whitestorm.js
em seu documento usando a tag script. O senhor pode fazer download desse arquivo no site
pasta de compilação
.

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

Isso é tudo. Agora o senhor pode escrever seu aplicativo com
whitestorm.js
em
app.js.

Webpack

Executar

npm install whs


.
Depois disso, o senhor deve adicionar o namespace WHS ao seu código.

import * as WHS from 'whs';

// ...

A próxima etapa é a configuração do Webpack.

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

Isso deve ser feito somente se o senhor estiver usando a versão com física. O senhor pode encontrar mais informações sobre
variações de
whitestorm.js


e


Uso com o webpack

na documentação.

Uso

WHS.World

Agora é hora de fazer seu primeiro
whitestorm.js
aplicativo. A primeira coisa que o senhor deve fazer é
configurar o World objeto
. Ao fazer isso, o senhor faz várias coisas ao mesmo tempo
:

• 
  Configuração
THREE.Scene
  (ou
Physijs.Scene
  )
• 
  Crie uma câmera em perspectiva e adicione-a à cena
• 
  Definir a gravidade (se a física estiver ativada)
• 
  Aplicar plano de fundo e outras opções do renderizador
• 
  Defina o tamanho automático/estatísticas (adicionalmente)

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
    }
  }
});

WHS.World: Inicializar cena, renderizador e câmera;

A tela WebGL será automaticamente adicionada ao
document.body node.
O senhor pode alterar o destino definindo um elemento DOM como container
do objeto de configuração que passamos para a função WHS.World.

WHS.Sphere

A próxima coisa a fazer é criar um simples sphere simples que cairá em um plano. Como já temos a cena, a câmera e o renderizador configurados, podemos começar a criar a esfera imediatamente. Para criar uma esfera simples, use o comando WHS.Sphere
. É um componente especial que envolve o
THREE.SphereGeometry, malha e física.

Por padrão, se o senhor usar uma versão de física do whitestorm.js, todos os objetos serão criados como objetos de física. Se o usuário não quiser ter um objeto de física, basta adicionar
physics: false
à configuração da esfera.

// 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.

Agora, se o senhor abrir o documento, verá a esfera que cairá.

Links

Sobre Alex Buzin

Desenvolvedor front-end sênior. Vencedor da Intel ISEF 2016 em uma categoria de software. Autor e desenvolvedor do framework WhitestormJS. Jogador de hóquei. Experiência com javascript há mais de 6 anos.

alexbuzin.me_alex_buzinPostagens