const app = new WHS.App([
      new WHS.ElementModule(),
      new WHS.SceneModule(),
      
      new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
        position: new THREE.Vector3(0, 0, 50)
      })),
      
      new WHS.RenderingModule({ bgColor:0xFFFAFA }),
      new WHS.OrbitControlsModule(),
      new WHS.ResizeModule()
    ]);
    
    
    const soda1 = new WHS.Cylinder({
      geometry: {
        radiusTop:8,
        radiusBottom:6,
        height:20
      },
      
      
      material: new THREE.MeshLambertMaterial({
        color:0xB0E0E6
      })
    })
    
    
    const soda2 = new WHS.Cylinder({
      geometry: {
        radiusTop:8.5,
        radiusBottom:8.5,
        height:2
      },
      
      
      material: new THREE.MeshLambertMaterial({
        color:0xFFFFFF
      }),
      position:[0, 10, 0]
    })
    
    
    const cup = new WHS.Group();
    
    soda1.addTo(cup)
    soda2.addTo(cup)
    
    new WHS.SpotLight( {
  light: {
    color: 0x00ff00,
    intensity: 1,
    distance: 1000
  },

  position: [10, 20, 10]
}).addTo(app);
    
    
    cup.addTo(app)
    app.start()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.js
  2. https://cdnjs.cloudflare.com/ajax/libs/whitestorm.js/2.1.9/whs.js