div#app
View Compiled
/* For ResizeModule */
html, body {
  position: relative;
  height: 100%;
}

#app {
  width: 100%;
  height: 100%;
}
const app = new WHS.App([
  new WHS.ElementModule({
    container: document.getElementById('app')
  }),
  new WHS.SceneModule(),
  new WHS.CameraModule({
    position: {
      y: 10,
      z: 25
    }
  }),
  new WHS.RenderingModule({
    bgColor: 0x162129,

    renderer: {
      antialias: true,
    }
  }),
  // new WHS.OrbitControlsModule(),
  new WHS.ResizeModule()
]);

app.manager.get('camera').native.lookAt({x: 0, y: 0, z: 0});

// Sphere
const box = new WHS.Box({ // Create sphere comonent.
  geometry: [9, 9, 9],

  material: new THREE.MeshPhongMaterial({
    color: 0xF2F2F2
  })
});

box.addTo(app);

// loop
new WHS.Loop(() => {
  box.rotation.y += 0.02;
}).start(app);

// lights
new WHS.AmbientLight({
  light: {
    intensity: 0.3
  }
}).addTo(app);

new WHS.PointLight({
  position: [10, 10, 10]
}).addTo(app);

// Start the app
app.start();
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/whitestorm.js/2.0.0-beta.9.1/whitestorm.js
  3. https://res.cloudinary.com/da3amwstb/raw/upload/v1486032086/BasicSphere_naxbbf.js