Hackernoon logoMigrating to WhitestormJS v2 beta. Module system by@_alex_buzin

Migrating to WhitestormJS v2 beta. Module system

Author profile picture

@_alex_buzinAlexander Buzin

New modules system🐫

Before we start, i will provide some useful links if you see WhitestormJS for the first time:

Github repo: https://github.com/WhitestormJS/whitestorm.js

npm: https://www.npmjs.com/package/whs


Modules are awesome. Modules can do anything you can do with plain THREE.Mesh, but much more cleaner an flexible way.

Step 1. Manager

Manager is used to add and get dependencies. Let’s say my module A knows that there is module B that will use its API. Then module A leaves a dependency in manager object for module B.

Module B can also provide a behavior “what to do if component C will overwrite component’s A dependency” with manager.update() method.

manager() in RenderingModule

Step 2. Integrate

Modules can have integrate() method. It is automatically executed when module is applied to a component or App. Commonly used to add some functionality to defined component.

Example of integrate function in SceneModule

Step 3. Bridges

Bridges allow developers to make component-specific API. Each component can extend it’s flexibility by providing parts of code that will be processed with “bridges”.

Let’s say i have a material object. I can pass this material to modules — they can change it’s color, make it semi-transparent or create and overwrite with a new one;

A part of WHS.Box code

Function .applyBridge() define that current object should go through the following bridge.

A part of TextureModule code

Bridge function accepts two parameters: the input object and module’s scope.

Bridge function’s scope is component as in integrate()


You can start exploring other modules in WhitestormJS on Github, we will continue adding modules (probably to the README). Currently you can use two modules that will help you in development, physics module + built-in modules.


The Noonification banner

Subscribe to get your daily round-up of top tech stories!