// once everything is loaded, we run our Three.js stuff.

$(function() {

  var scene = initScene();

  var renderer = initRenderer();

  var camera = initCamera();

  var cube = initCube();

  scene.add(cube);

  //$("WebGL-output").add(renderer.domElement);

  $("#WebGL-output").append(renderer.domElement);

​

  //requestAnimationFrame(renderer);

  renderer.render(scene, camera);

​

  function initScene() {

    var scene = new THREE.Scene();

    return scene;

  }

​

  function initRenderer() {

    var renderer = new THREE.WebGLRenderer({

      antialias: true

    });

    renderer.setClearColor(0xEEEEEE);

    renderer.setSize(window.innerWidth, window.innerHeight);

    return renderer;

  }

​

  function initCamera() {

    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

    camera.position.set(30, -20, 10);

    camera.lookAt(scene.position);

    return camera;

  }

​

  function initCube() {

    var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);

    var cubeMaterial = new THREE.MeshBasicMaterial({

      color: 0xff0000,

      wireframe: true

    });

    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

    cube.position.set(0, 0, 0);

    return cube;

  }

});