基于 Three.js 的超快的 3D 开发框架:Whitestorm.js

9,499 阅读1分钟
原文链接: github.com

Framework for developing 3D web apps

Contributors welcome! :P Contact me

Development chat - opens in discord app. Ask for help here;)

Support the project - [Donate] buy developers a ☕

$ npm install --save whs

Showcases

You can find lots of examples at showcases.

basic/helloworld basic/model softbody/cloth3 postprocessing/basic-glitch softbody/ropes design/saturn

Why?

  • 🤔 Because making of even a basic Three.js application requires at least ~20 lines of code (see this tutorial)

    • Three.js: you will need to setup: scene, renderer, camera, make an animate() function before making the actual app.
    • Whitestorm.js: There are modules that helps you easily setup them:

      const app = new WHS.App([
        new WHS.app.ElementModule(), // attach to DOM
        new WHS.app.SceneModule(), // creates THREE.Scene instance
        new WHS.app.CameraModule(), // creates PerspectiveCamera instance
        new WHS.app.RenderingModule() // creates WebGLRenderer instance
      ]);
      
      app.start(); // run animation

      See more about modules

  • 💣 Adding physics is hard.

    • Three.js: To make your app run with physics you need to make a second world with same 3d objects and apply their transform (position & rotation) to your rendered scene objects (THREE.Scene for example) in every frame.
    • Whitestorm.js: Can be done with modules in a few lines:

      const app = new WHS.App([
        // Other modules...
        new PHYSICS.WorldModule()
      ]);
      
      const sphere = new WHS.Sphere({
        geometry: {
          radius: 3
        },
      
        modules: [
          new PHYSICS.SphereModule({
            mass: 10
          })
        ],
      
        material: new THREE.MeshBasicMaterial({color: 0xff0000}) // red material
      });
      
      app.start(); // run animation

      Use physics-module-ammonext as your physics module.

      Try with physics on Codepen:

  • 🔌 Components & plugins

    • Three.js: You can create meshes with geometry and material.
    • Whitestorm.js: You can create components with advanced custom functionality.

      export class BasicComponent extends WHS.MeshComponent {
        build() {
          return new THREE.Mesh(
            new THREE.IcosahedronGeometry(3, 5),
            new THREE.MeshBasicMaterial({color: 0xffffff})
          )
        }
      
        randomize() { // Additional function
          this.position.set(Math.random() * 10, Math.random() * 10, Math.random() * 10);
        }
      }
    • See Component system in interactive 3D of web article for more info.


Download

CDN

Proudly hosted by cdnjs:D (soon)

Features

  • 💎 Simple in usage
  • Minimize 3D scene prototyping
  • 🔌 Component based scene graph
  • 💣 Simple integration of any high performance physics even with Worker (Multithreading)
  • Automatization of rendering
  • 🆕 ES2015+ based
  • Extension system (modules)
  • Webpack friendly
  • ✔️ Integrated Three.js rendering engine
  • Work with Whitestorm.js and Three.js at the same time

WEBPACK

Use whitestorm-app-boilerplate

Documentation

Documentation for beta is currently in progress. Contact developers in discord chat

Basic application

Try on Codepen:

const app = new WHS.App([
  new WHS.app.ElementModule(), // attach to DOM
  new WHS.app.SceneModule(), // creates THREE.Scene instance
  new WHS.app.CameraModule({
    position: new THREE.Vector3(0, 0, -10)
  }), // creates PerspectiveCamera instance
  new WHS.app.RenderingModule(), // creates WebGLRenderer instance
  new WHS.controls.OrbitModule() // orbit controls
]);

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

  material: new THREE.MeshBasicMaterial({
    color: 0xffffff, // White color.
  }),

  position: new THREE.Vector3(0, 1, 0) // x: 0, y: 1, z: 0
});

sphere.addTo(app);
console.log(sphere.native); // Logs THREE.Mesh of this component

app.start(); // run animation

You can easily integrate Whitestorm.js with React using react-whs tool!

$ npm install react react-whs --save

Try with React on Codepen:

Example:

import React, {Component} from 'react';
import {App, Sphere} from 'react-whs';

export class Application extends Component {
  render() {
    return (
      <App modules={[
        new WHS.app.SceneModule(),
        new WHS.app.CameraModule({
          position: {
            z: 20
          }
        }),
        new WHS.app.RenderingModule(),
        new WHS.controls.OrbitModule()
      ]}>
        <Sphere
          geometry={[3, 32, 32]}
          material={new THREE.MeshBasicMaterial({color: 0xffffff})}
          key="1"
        />
      </App>
    )
  }
}

Modules

Devtools

Name Status Description
whs-module-statsjs statsjs-npm WhitestormJS module for JavaScript Performance Monitor ⚡⌛
whs-module-dat.gui datgui-npm User Interface for runtime editing properties 🔑 🛠 🔩

Physics

Name Status Description
physics-module-ammonext physics-ammonext-npm Physics module based on Ammo.js

Integrations

Name Status Description
react-whs react-whs-npm Integration with ReactJS

Backers

Support us with a monthly donation and help us continue framework development 🎉 and adding new features 💡 🎁.

 

Sponsors

Become a sponsor and get your logo on on our README on Github with a link to your website 🔭.

Sponsors

forthebadge