A estrutura da páxina é a seguinte:


<!doctype html>

<html>

<head>
  <script src="js/three.min.js"></script>
  <script src="js/TrackballControls.js"></script>
</head>

<body>

<div id="ThreeJS"></div>

<script>

var container, scene, camera, renderer, controls;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 20000);
    camera.position.set(250, 300, 250);
    scene.add(camera);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    container = document.getElementById( 'ThreeJS' );
    container.appendChild( renderer.domElement );

    controls = new THREE.TrackballControls(camera, renderer.domElement);
    controls.rotateSpeed = 5.0;

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

    var light = new THREE.PointLight(0x888888);
    light.position.set(-200,-150,-300);
    scene.add(light);

    var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
    var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x00ffff, side: THREE.BackSide } );
    var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
    scene.add(skyBox);


	// INICIO ESCEA
	scene.add( new THREE.AxisHelper(200) );

	var geometria = new THREE.CylinderGeometry( 0, 60, 150, 60, 60, true);
	var material  = new THREE.MeshPhongMaterial( { color: 0x00ffff, side: THREE.DoubleSide} );
	var cono = new THREE.Mesh( geometria, material );
	scene.add( cono );
	// FIN ESCEA

    }

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    controls.update();
    }


</script>

</body>

</html>