function threeJsRenderer() {
  var width = 325;
  var height = 375;
  var scene = new THREE.Scene();
  var camera = new THREE.OrthographicCamera(width / - 2, width / 2, height / 2, height / - 2, -200, 1000);

  var renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  renderer.setClearColor( 0x000000, 0 );
  renderer.setSize(width,height);
  document.getElementById('projection').appendChild(renderer.domElement);

  // CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
  var geometry = new THREE.CylinderGeometry(135,128,110,64,1, false, 0, Math.PI-2);
  var loader = new THREE.TextureLoader();
  var material = new THREE.MeshPhongMaterial();

  var cone = new THREE.Mesh();

  var pointLight = new THREE.AmbientLight( 0xFFFFFF );
  pointLight.position.x = 10;
  pointLight.position.y = 50;
  pointLight.position.z = 130;
  scene.add(pointLight);

  camera.position.z = 40;
  camera.position.y = 0;
  cone.rotation.x = 0.01;
  cone.rotation.y = -10;

  jQuery(document).on('new3DConfigReady', function () {
    scene.remove(cone);
    var newGeometry = new THREE.CylinderGeometry(state.cylinderGeometry.radiusTop,state.cylinderGeometry.radiusBottom,state.cylinderGeometry.height,64,1, false, 0, Math.PI-2);;
    cone = new THREE.Mesh(newGeometry, material);
    cone.rotation.x = 0.01;
    cone.rotation.y = -0.55;
    cone.position.y = state.cylinderGeometry.positionY;


    geometry.dispose();
    if(state.textureUrl !== ''){
      scene.add(cone);
    }

  });

  jQuery(document).on('newTextureReady', function () {
    loader.load( state.textureUrl, function (texture){
      material.map = texture;
      material.map.anisotropy = 256;
      material.map.needsUpdate = true;
      material.needsUpdate = true;
      scene.add(cone);

    });
  });

  var render = function () {

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

  render();
}