Untitled

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

    <title>webGL</title>

    <script type="text/javascript" src="js/three.min.js"></script>
    <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>


    <style type="text/css">

        html,body, #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: black;
        }
        #container {position: absolute;}

    </style>

</head>

<body>
</body>
</html>

"use strict";

var renderer, scene, camera, cube1, cube2;
var speed = 0.5;

window.onload = function getFuncs() {

    addContainer();
    prepareScene();
    addCubes()
    rotation();
    animation();
}

function addContainer() {

    var div = document.createElement("div");
    document.body.appendChild(div);
    div.setAttribute("id", "container");
}

function prepareScene() {

    var container = document.getElementById("container");
    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(container.innerWidth, container.innerHeight);

    container.appendChild(renderer.domElement);

    scene = new THREE.Scene();

    var aspectRatio = container.innerWidth / container.innerHeight;

    camera = new THREE.PerspectiveCamera(45, aspectRatio, 0.1, 20000);
    camera.position.set(0, 150, 400);
    camera.lookAt(new THREE.Vector3(0, 0, 0));

    var light = new THREE.PointLight(0xffffff);
    light.position.set(0, 250, 0);
    scene.add(light);

    var ambientLight = new THREE.AmbientLight(0x111111);
    scene.add(ambientLight);
}

function addCubes() {

    var geometry = new THREE.CubeGeometry(100, 100, 100, 100, 100);
    var material = new THREE.MeshLambertMaterial({color: 0x11ff55, wireframe: true});
    cube1 = new THREE.Mesh(geometry, material);
    cube2 = new THREE.Mesh(geometry, material);

    cube1.position.set(-100, 50, 100);
    cube2.position.set(100, 50, 100);

    scene.add(cube1);
    scene.add(cube2);
}

function rotation() {
    cube1.rotation.y += speed;
    cube2.rotation.y -= speed;
}

function animation() {

    renderer.render(scene, camera);
    rotation();
    requestAnimationFrame(animation);
}