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

score 2 · Accepted Answer · answered Jan 12 '13 at 11:45

2

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 );
}

answered Jan 12 '13 at 11:45

yaku

3,061
2
19
38

good response : ok I understand my error : I placed my var delta after request animation frame, no ? a What is the "* 10" ? next step: the collision – Laurane Bernard Jan 12 '13 at 12:33
Sorry I don't exactly understand what you are asking. The problem was the delta was defined in different function. Order within the same function does not make much difference, as long as you define the variables before you use them :) – yaku Jan 12 '13 at 12:43
it was the problem : I use my variable before to define her... but it's ok... i suppose This is the function that prevents collision from sinking into the ground as ? .. – Laurane Bernard Jan 12 '13 at 12:46

firstpersoncontrols delta is not defined

1 Answers1