firstpersoncontrols增量未定义

Question

我测试使用three.js中的firstpersoncontrols。但在复制示例以了解其工作方式时，我在控制台中始终存在相同的错误：未定义增量。如果你是一个解释：

<!-- 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> 

感谢到吃茶和答案

Answer 1

你在这部分的一些问题：

function render() { 

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

}    

function animate() { 

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

renderer.render(scene, camera); 

} 

您定义三角洲变量渲染（）函数，这是外有生命的skope的。尝试将这些行移动到animate（）函数，如下所示：

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