whs group rotation

by hirako2000

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/whitestorm.js/2.1.9/whs.min.js"></script>
<div id="app">

</div>


 
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"> </script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/whitestorm.js/2.0.0-beta.9.1/whitestorm.js"> </script>

CSS

body {
  margin: 0;
}

JavaScript 1.7

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

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

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


const box = new WHS.Box({ // create first cube
  geometry: [9, 9, 9],

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

const box2 = new WHS.Box({ // Create 2nd cube a bit higher.
  geometry: [9, 9, 9],

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

box2.position.y = 10; //box 1 is at y 0 and box2 is at y 10

const group = new WHS.Group(box, box2); // This is the main group
const grandGroup = new WHS.Group(group); // This is the parent of the main group
grandGroup.addTo(app);

group.position.y = -5; // the group inside the parent group s set as the negative center

// loop
new WHS.Loop(() => {
  grandGroup.rotation.x += 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();