Good Start

by Alan Lin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/Detector.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r14/Stats.min.js"></script>

CSS

canvas {
    position: fixed;
    top: 0;
    left: 0;
}

JavaScript

var clock = new THREE.Clock();
var scene, renderer, camera;
var cube;
var angle = 0;
var turn = 1;

init();
animate();

function init() {
    var width = window.innerWidth;
    var height = window.innerHeight;

    //create and start the renderer; choose antialias setting.
    if (Detector.webgl) renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    else renderer = new THREE.CanvasRenderer();

    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);

    // STATS
    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '0px';
    stats.domElement.style.zIndex = 100;
    document.body.appendChild(stats.domElement);

    scene = new THREE.Scene();


    var cubeGeometry = new THREE.CylinderGeometry(10, 10, 10);
    var cubeMaterial = new THREE.MeshLambertMaterial({
        color: 0x20ff20
    });
    //cubeMaterial = new THREE.MeshBasicMaterial ({color: 0xff0000, vertexColors: THREE.VertexColor});
    cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

    cube.position.set(50, 0, 0);
    scene.add(cube);

    camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
    camera.position.y = 100;
    camera.position.z = 200;
    camera.lookAt(new THREE.Vector3(0, 0, 0));

    var skyboxGeometry = new THREE.BoxGeometry(1000, 1000, 1000);
    var skyboxMaterial = new THREE.MeshBasicMaterial({
        color: 0x1f1f1f,
        side: THREE.BackSide
    });
    var skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);
    scene.add(skybox);

    var gridXZ = new THREE.GridHelper(100, 10);
    gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
    scene.add(gridXZ);

    var pointLight = new THREE.PointLight(0xffffff);
    pointLight.position.set(0, 300, 200);
    scene.add(pointLight);

    window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
    camera.aspect = window.innerWidth /...