Skip to content

Latest commit

 

History

History
72 lines (55 loc) · 2.7 KB

WHY.md

File metadata and controls

72 lines (55 loc) · 2.7 KB

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.ElementModule(), // attach to DOM
        new WHS.SceneModule(), // creates THREE.Scene instance
        new WHS.DefineModule('camera', new WHS.PerspectiveCamera()), // creates PerspectiveCamera instance
        new WHS.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.