CODEWITHSUNDEEP
javascriptthree.js
demonSlayer
demonSlayer

Reputation: 315

TypeError: array[i].call is not a function Error

My code is : 

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

});

I am getting an error that says : TypeError: array[i].call is not a function
and is pointing to line 7484 of three.js library.
I have included the three.js library using: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js"></script>

So as you can see, its the v73 and I haven't touched the code. What could be the problem?

The error only comes after screen is clicked and then mouse pointer is dragged, so it must have got to do with that piece of code.

Upvotes: 2

Views: 3133

Answers (1)

micnil
micnil

Reputation: 4805

Assuming that you want the scene to render when OrbitControls sends a change event, you'll have to change the code to:

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

Upvotes: 6

Related Questions