TypeError: array[i].call 不是函数错误

Question

我的代码是：

$(function() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer({antialias: true});

    renderer.setClearColor(0xdddddd);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMapSoft = true;


    var axis = new THREE.AxisHelper(10);
    scene.add(axis);

    var grid = new THREE.GridHelper(50, 5);
    var color = new THREE.Color("rgb(255,0,0)");
    grid.setColors(color, 0x000000);
    scene.add(grid);

    var Ground_geometry = new THREE.BoxGeometry( 20, 0.1, 20 );
    var Ground_material = new THREE.MeshPhongMaterial( {
        color: 0xa0adaf,
        shininess: 150,
        specular: 0xffffff,
        shading: THREE.SmoothShading
    } );

    var ground = new THREE.Mesh( Ground_geometry, Ground_material );
    ground.scale.multiplyScalar( 3 );
    ground.castShadow = false;
    ground.receiveShadow = true;
    scene.add( ground );

    var ambient = new THREE.AmbientLight( 0x404040 );
    scene.add( ambient );

    spotLight = new THREE.SpotLight( 0xffffff );
    spotLight.position.set( 10, 10, 15 );
    spotLight.castShadow = true;
    spotLight.shadowCameraNear = 8;
    spotLight.shadowCameraFar = 30;
    spotLight.shadowDarkness = 0.5;
    spotLight.shadowCameraVisible = false;
    spotLight.shadowMapWidth = 1024;
    spotLight.shadowMapHeight = 1024;
    spotLight.name = 'Spot Light';
    scene.add( spotLight );

    var controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.addEventListener( 'change', renderer );

    var cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
    var cubeMaterial = new THREE.MeshPhongMaterial({
        color: 0x456574 ,
        shininess: 150,
        specular: 0x222222,
        shading: THREE.SmoothShading,
    });
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

    cube.position.x = 0;
    cube.position.y = 0;
    cube.position.z = 0;

    scene.add(cube);

    camera.position.x = 40;
    camera.position.y = 40;
    camera.position.z = 40;

    camera.lookAt(scene.position);

    renderer.render(scene, camera);
    $("#webGL-container").append(renderer.domElement);


    $(window).resize(function(){
        SCREEN_WIDTH = window.innerWidth;
        SCREEN_HEIGHT = window.innerHeight;
        camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
        camera.updateProjectionMatrix();
        renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
    });

});

我收到一条错误消息： TypeError: array[i].call is not a function
and is pointing to line 7484 of Three.js 库。
我使用以下方法包含了 Three.js 库：

$(function() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer({antialias: true});

    renderer.setClearColor(0xdddddd);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMapSoft = true;


    var axis = new THREE.AxisHelper(10);
    scene.add(axis);

    var grid = new THREE.GridHelper(50, 5);
    var color = new THREE.Color("rgb(255,0,0)");
    grid.setColors(color, 0x000000);
    scene.add(grid);

    var Ground_geometry = new THREE.BoxGeometry( 20, 0.1, 20 );
    var Ground_material = new THREE.MeshPhongMaterial( {
        color: 0xa0adaf,
        shininess: 150,
        specular: 0xffffff,
        shading: THREE.SmoothShading
    } );

    var ground = new THREE.Mesh( Ground_geometry, Ground_material );
    ground.scale.multiplyScalar( 3 );
    ground.castShadow = false;
    ground.receiveShadow = true;
    scene.add( ground );

    var ambient = new THREE.AmbientLight( 0x404040 );
    scene.add( ambient );

    spotLight = new THREE.SpotLight( 0xffffff );
    spotLight.position.set( 10, 10, 15 );
    spotLight.castShadow = true;
    spotLight.shadowCameraNear = 8;
    spotLight.shadowCameraFar = 30;
    spotLight.shadowDarkness = 0.5;
    spotLight.shadowCameraVisible = false;
    spotLight.shadowMapWidth = 1024;
    spotLight.shadowMapHeight = 1024;
    spotLight.name = 'Spot Light';
    scene.add( spotLight );

    var controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.addEventListener( 'change', renderer );

    var cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
    var cubeMaterial = new THREE.MeshPhongMaterial({
        color: 0x456574 ,
        shininess: 150,
        specular: 0x222222,
        shading: THREE.SmoothShading,
    });
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

    cube.position.x = 0;
    cube.position.y = 0;
    cube.position.z = 0;

    scene.add(cube);

    camera.position.x = 40;
    camera.position.y = 40;
    camera.position.z = 40;

    camera.lookAt(scene.position);

    renderer.render(scene, camera);
    $("#webGL-container").append(renderer.domElement);


    $(window).resize(function(){
        SCREEN_WIDTH = window.innerWidth;
        SCREEN_HEIGHT = window.innerHeight;
        camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
        camera.updateProjectionMatrix();
        renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
    });

});

正如您所看到的，它是 v73，我还没有触及代码。可能是什么问题呢？

仅在单击屏幕然后拖动鼠标指针后才会出现错误，因此它一定与那段代码有关。

Answer 1

假设您希望在 OrbitControls 发送更改事件时渲染场景，则必须将代码更改为：

controls.addEventListener( 'change', render );
.
.
.
function render() {
    renderer.render( scene, camera );
}
renderer.render( scene, camera );