Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Migrating to WhitestormJS V2 Beta: Module System

DZone's Guide to

Migrating to WhitestormJS V2 Beta: Module System

Check out the new module system that was recently added to WhitestormJS, a framework for 3D web apps built with Three.js technology.

· Web Dev Zone
Free Resource

Never build auth again! Okta makes it simple to implement authentication, authorization, MFA and more in minutes. Try the free developer API today! 

New Module System

Before we start, I will provide some useful links in case you've never seen WhitestormJS before:

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

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


Modules

Modules are awesome. Modules can do anything you can do with plain THREE.Mesh, but much cleaner and in a 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 the manager object for module B.

Module B can also provide a behavior like "What to do if component C overwrites component A's dependency" with the manager.update() method.

manager() in RenderingModule


Step 2. Integrate

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

Example of integrate function in SceneModule


Step 3. Bridges

Bridges allow developers to make a component-specific API. Each component can extend its flexibility by providing parts of the 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 its color, make it semi-transparent, or create and overwrite with a new one.

A part of WHS.Box code


The function .applyBridge() defines that the current object should go through the following bridge.

A part of TextureModule code


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

The bridge function’s scope is a component as in integrate().

Conclusion

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.

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

Topics:
javascript ,webgl ,framework ,game dev ,three.js ,web dev

Published at DZone with permission of Alexander Buzin. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}