XTK Lesson 01

Skin the cube and rotate it! author(s): XTK

CSS

html, body { 
  background-color:#000;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden !important;  
}

JavaScript

window.onload = function() {

  // create and initialize a 3D renderer
  var r = new X.renderer3D();
  r.init();
  
  // create a cube
  cube = new X.cube();
  // skin it..
  cube.texture.file = 'https://fly.cs.umb.edu/data/X/xtk.png';
  
  r.add(cube); // add the cube to the renderer
  r.render(); // ..and render it
  
  // add some animation
  r.onRender = function() {

    // rotation by 1 degree in X and Y directions
    cube.transform.rotateX(1);
    cube.transform.rotateY(1);
    
  };
  
};