Edit in JSFiddle

// Basic setup
// Fingers crossed I will just get a cube I can move around
// Have added some resources (Three.js, RequestAnimationFrame.ja, Stats.js)


// Ok everyone seems to start with these so lets set them up now
var output = new Output(),
    container, stats;

// These used for three.js
var camera, scene, renderer;
// Objects in the scene
var cube;
var gui;

// Setup the scene and then call animate
init();
animate();

// Setup the scene


function init() {
    // Show that we are initiated
    output.log("Init called");

    // Create a dov to contain everything
    container = document.createElement('div');
    document.body.appendChild(container);
    

    // Give this example a title
    var info = document.createElement('div');
    info.style.position = 'absolute';
    info.style.top = '10px';
    info.style.width = '100%';
    info.style.textAlign = 'center';
    info.innerHTML = 'Just a box';
    container.appendChild(info);

    // Create a new scene
    scene = new THREE.Scene();
    output.log("Scene created");
    
    // Setup the camera
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.y = 150;
    camera.position.z = 500;
    scene.add(camera);
    output.log("Camera added");

    // Create new material to add to the cube
    var materials = [];

    for (var i = 0; i < 6; i++) {
        materials.push(new THREE.MeshBasicMaterial({
            color: Math.random() * 0xffffff
        }));
    }
    // Create and add a new cube
    cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200, 1, 1, 1, materials), new THREE.MeshFaceMaterial());
    cube.position.y = 150;
    cube.overdraw = true;
    scene.add(cube);
    output.log("Cube Added");

    // Which rendering engine are we using
    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add the renderer to the container
    container.appendChild(renderer.domElement);
    output.log("Canvas Renderer added");

    // Do this last so its above everything (or jsut zIndex it)
    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '0px';
    container.appendChild(stats.domElement);
    output.log("Stats.js added");
    
    // dat.gui controls
    gui = new dat.GUI();
    var f1 = gui.addFolder('Cube Rotation');
    f1.add(cube.rotation, 'x').min(0).max(10).step(0.1);
    f1.add(cube.rotation, 'y').min(0).max(10).step(0.1);
    f1.add(cube.rotation, 'z').min(0).max(10).step(0.1);
    f1.open();
    output.log("dat.GUI added");
}

// The animate function will run every frame...


function animate() {
    // ...Thanks to this
    requestAnimationFrame(animate);

    // Render this frame
    render();
    // Update the stats
    stats.update();
}

function render() {
    renderer.render(scene, camera);
}


function Output() {

    // Create an output window, style and add to body
    var outputWindow = $("<div></div>").attr({
        id: 'outputWin'
    }).css({
        backgroundColor: '#fff',
        border: '1px solid #000',
        bottom: 10,
        color: '#333',
        fontFamily: 'arial, san-serif',
        fontSize: '11px',
        height: 60,
        overflow: 'auto',
        padding: 5,
        position: 'absolute',
        right: 10,
        width: 150
    }).appendTo('body'),

        log = function(text) {
            outputWindow.append(text + "<br />");
            outputWindow.stop(true, true).animate({
                scrollTop: outputWindow.get(0).scrollHeight
            });
        };

    return {
        log: log,
        outputWindow: outputWindow
    }
};

              
body {
    font-family: Monospace;
    background-color: #f0f0f0;
    margin: 0px;
    overflow: hidden;
}

External resources loaded into this fiddle: