https://github.com/whitestormjs/whitestorm-app-boilerplate

[WIP] WhitestormJS 2 App boilerplate
https://github.com/whitestormjs/whitestorm-app-boilerplate

boilerplate threejs webpack whitestormjs

Last synced: about 14 hours ago
JSON representation

[WIP] WhitestormJS 2 App boilerplate

• Host: GitHub
• URL: https://github.com/whitestormjs/whitestorm-app-boilerplate
• Owner: WhitestormJS
• License: mit
• Created: 2017-01-25T16:05:49.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-03-16T11:24:07.000Z (over 6 years ago)
• Last Synced: 2024-02-21T23:38:40.356Z (9 months ago)
• Topics: boilerplate, threejs, webpack, whitestormjs
• Language: JavaScript
• Homepage: http://whs-boilerplate-app.surge.sh/
• Size: 414 KB
• Stars: 44
• Watchers: 24
• Forks: 17
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# whitestorm-app-boilerplate

[WIP] WhitestormJS 2 App boilerplate

[![Build Status][travis]][travis-url]

[![deps][deps]][deps-url]

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

[![Discord][discord]][discord-url]

[travis]: https://img.shields.io/travis/WhitestormJS/whitestorm-app-boilerplate.svg?style=flat-square

[travis-url]: https://travis-ci.org/WhitestormJS/whitestorm-app-boilerplate

[deps]: https://img.shields.io/david/whitestormjs/whitestorm-app-boilerplate.svg

[deps-url]: https://david-dm.org/whitestormjs/whitestorm-app-boilerplate

[discord]: https://discordapp.com/api/guilds/238405369859145729/widget.png

[discord-url]: https://discord.gg/frNetGE



## `app.js`

```javascript

// Core

import {App} from '@whs/core/App';

import {

  ElementModule,

  SceneModule,

  CameraModule,

  RenderingModule

} from '@whs:app';

import {OrbitModule} from '@whs:controls/orbit';

import {FancyMaterialModule} from './modules/FancyMaterialModule';

// Components

import {Plane} from '@whs+meshes/Plane';

import {BasicComponent} from './components/BasicComponent';

const app = new App([

  new ElementModule({

    container: document.getElementById('app')

  }),

  new SceneModule(),

  new CameraModule({

    position: {

      z: -15

    }

  }),

  new RenderingModule({bgColor: 0x000001}),

  new OrbitModule()

]);

app.add(new BasicComponent({

  modules: [

    new FancyMaterialModule(app)

  ]

}));

app.start();

```

## `./components/BasicComponent.js`

```javascript

import {

  Mesh,

  IcosahedronGeometry,

  MeshBasicMaterial

} from '@whs^three';

import {MeshComponent} from '@whs/core/MeshComponent';

export class BasicComponent extends MeshComponent {

  build() {

    return new Mesh(

      new IcosahedronGeometry(3, 5),

      this.applyBridge({

        material: new MeshBasicMaterial({color: 0xffffff})

      }).material

    )

  }

}

```

## `./modules/FancyMaterialModule.js`

```javascript

import {ShaderMaterial} from '@whs^three';

import {Loop} from '@whs/core/Loop';

import glsl from 'glslify';

import vertex from './vertex.glsl';

import fragment from './fragment.glsl';

export class FancyMaterialModule {

  constructor(app) {

    this.bridge = {

      material() {

        const material = new ShaderMaterial({

          uniforms: {

            time: {value: 1.0}

          },

          vertexShader: vertex,

          fragmentShader: fragment

        });

        new Loop(c => {

          material.uniforms.time.value += c.getDelta();

        }).start(app);

        return material;

      }

    }

  }

}

```