firstpersoncontrols delta is not defined

Question

I test for use the firstpersoncontrols in three.js. but in copying examples to anderstand how it's work, i have always the same error in console : delta is not defined. if you are an explication :

<!-- upload librarie -->
<script src="../THREEJS03/build/three.min.js"></script>
<!-- upload les modes d'interactions -->
<script src="js/controls/FirstPersonControls.js"></script>

<script src="js/loaders/MTLLoader.js"></script>
<script src="js/loaders/OBJMTLLoader.js"></script>

<!-- upload la detection du webgl -->
<script src="js/Detector.js"></script>

<script>
//detection du webgl
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var container;

var camera, cubeCamera, controls, scene, renderer;

var clock = new THREE.Clock();

init();
animate();
//////////////////////// SCENE /////////////////////////////////////
function init() {
    // scene
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 3000 );
    camera.position.x = 00;
    camera.position.y = 80;
    camera.position.z = 00;

    controls = new THREE.FirstPersonControls( camera );

    controls.movementSpeed = 1000;
    controls.lookSpeed = 0.125;
    controls.lookVertical = true;
    controls.constrainVertical = false;
    controls.verticalMin = 1.1;
    controls.verticalMax = 2.2;
    controls.noFly = true;

scene = new THREE.Scene();

scene.add( camera );


// light

// add ambient lighting
    var ambientLight = new THREE.AmbientLight(0x020202);
    scene.add(ambientLight);

    var pointLight = new THREE.PointLight(0xffffff); //0xffaa00
        pointLight.position.x = -300;
        pointLight.position.y = 300;
        pointLight.position.z = 500;
        scene.add(pointLight);

//SKYBOX (only reflexive)
// Cubic Texture
   var r = "models/world/";
   var urls = [r + "posx.jpg", r + "negx.jpg",
               r + "posy.jpg", r + "negy.jpg",
               r + "posz.jpg", r + "negz.jpg"];

        var textureCube = THREE.ImageUtils.loadTextureCube(urls);

////////////////////////// OBJET ////////////////////////////

var loader = new THREE.OBJMTLLoader();
loader.addEventListener( 'load', function ( event ) {

var object = event.content;
       object.position.y = 0;
   scale = 1;
   scene.add( object );
});
loader.load( 'models/macabann/obj/scene/scene01.obj', 'models/macabann/obj/scene/scene01.mtl' );

var material = new THREE.MeshPhongMaterial( {
//Environnement 
envMap: textureCube,
combine: THREE.MixOperation, 
//Color Application
side: THREE.DoubleSide, 
shading: THREE.SmoothShading
});

///////////////////// FIN OBJET ///////////////////////

/////////////////// RENDERER //////////////////////

//type de rendu (antialias true or false)
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColorHex( 0xf3f3f3, 1 );
renderer.shadowMapEnabled = true;

//dimension du rendu
renderer.setSize( window.innerWidth, window.innerHeight );

// create wrapper object that contains three.js objects
container = document.createElement( 'div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement );

///////////////////// FIN RENDERER ///////////////////////

//////////////////// WINDOWS ////////////////////////

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

}

function onWindowResize() {
       camera.aspect = window.innerWidth / window.innerHeight;
   camera.updateProjectionMatrix();
       renderer.setSize( window.innerWidth, window.innerHeight );
       controls.handleResize();

}
//////////////////////////FIN WINDOWS //////////////////////

function render() {

    var delta = clock.getDelta();
    time = clock.getElapsedTime() * 10;

    }               

function animate() {

    requestAnimationFrame( animate );
            controls.update(delta);

    renderer.render( scene, camera );

    }

</script>

thank to explications and answers

Answer 1

You have some problems in this part:

function render() {

var delta = clock.getDelta();
time = clock.getElapsedTime() * 10;

}               

function animate() {

requestAnimationFrame( animate );
        controls.update(delta);

renderer.render( scene, camera );

}

You define delta variable in render() function, which is outside of the skope of animate. Try moving those lines to the animate() function, like this:

function render() {
  // is this function needed at all?
}               

function animate() {
  var delta = clock.getDelta();
  time = clock.getElapsedTime() * 10;
  requestAnimationFrame(animate);
  controls.update(delta);
  renderer.render( scene, camera );
}