Threejs animation issue - three.js

Question

Trying to load a STL model into a canavas with Threejs is giving me an error every time the animate function is runned;
Uncaught TypeError: Cannot read property 'render' of undefined
at animate (
I know the STL file is good it worked before.
Here is my code;
// Globals
var scene, camera, light, renderer;
init();
animate();
// Sets up the scene.
function init() {
// Create the scene and set the scene size.
scene = new THREE.Scene();
//Scene Lighting
scene.add( new THREE.AmbientLight( 0x000000 ) );
//Renderer
var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('modelCan'), antialias:true});
renderer.setClearColor(0xfffffff);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize( window.innerWidth/3, window.innerHeight/3 );
//Camera
var camera = new THREE.PerspectiveCamera(1000, window.innerWidth/window.innerHeight, 1, 10000);
scene.add(camera);
//Camera Lightning
var light = new THREE.PointLight( 0xffffff, 1);
camera.add( light );
var loader = new THREE.STLLoader();
loader.load( 'Sac_Fuel_Tank.stl', function ( geometry ) {
var material = new THREE.MeshLambertMaterial( { color: 0x286617,
wireframe: true
} );
var mesh = new THREE.Mesh( geometry, material );
mesh.rotation.x = Math.PI / 2;
mesh.position.set(20,10,-10);
// mesh.rotation.z = Math.PI;
scene.add( mesh );
} );
controls = new THREE.OrbitControls(camera, renderer.domElement);
}
function animate() {
// Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
requestAnimationFrame(animate);
// Render the scene.
renderer.render(scene, camera);
controls.update();
}
So what am I doinng wrong?

Answer 1

You have to remove the var keyword when creating the renderer. Just do:
renderer = new THREE.WebGLRenderer( { canvas: document.getElementById('modelCan'), antialias:true } );