Search code examples
javascriptthree.jsperspectivecamera

Three.js Perspective Camera "undefined is not a function"


I have a program that used to work, but I am now getting the "undefined is not a function" error from within the three.js file. The error is pointing to line 10466 of the uncompressed library, and this line is within the declaration of THREE.PerspectiveCamera. Where is the problem? Thanks!

var assets = {};

var modelLoader = new THREE.JSONLoader(true);
modelLoader.load("assets/horse.js", onLoadedAssets);

var loading = setTimeout(function() {
    console.log("loading...");
}, 1000);

var scene, camera, renderer, controls;
var horse, box;

function init() {
    scene = new THREE.Scene();

    var w = window.innerWidth,
        h = window.innerHeight;

    camera = THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.y = 0;
    camera.target = new THREE.Vector3(0, 0, 0);

    var light1 = new THREE.DirectionalLight(0xefefff, 2);
    light1.position.set(1, 1, 1).normalize();
    scene.add(light1);

    var light2 = new THREE.DirectionalLight(0xffefef, 2);
    light2.position.set(-1, -1, -1).normalize();
    scene.add(light2);

    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

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

    box = new Box(500, 500, 500);
    horse = new Horse();
}

function animate() {
    requestAnimationFrame(animate);
    render();
}


var prevTime = Date.now();

function render() {

    camera.position.x = 560 + Math.random() * 40;
    camera.position.z = 560 + Math.random() * 40;

    camera.lookAt(camera.target);

    if (horse.animation) {

        var time = Date.now();

        horse.animation.update(time - prevTime);

        prevTime = time;

    }

    renderer.render(scene, camera);

}

function onLoadedAssets(geometry) {

    clearTimeout(loading);
    console.log("loaded assets.")

    geometry.computeFaceNormals();
    geometry.computeVertexNormals();

    var material = new THREE.MeshLambertMaterial({
        color: 0x606060,
        morphTargets: true
    });

    var mesh = new THREE.Mesh(geometry, material);
    mesh.scale.set(1, 1, 1);

    var animation = new THREE.MorphAnimation(mesh);
    animation.play();
    animation.isPlaying = false;

    assets["horse"] = {
        mesh: mesh,
        animation: animation
    };

    init();
    animate();
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;

    camera.updateProjectionMatrix();

    renderer.setSize(w, h);
}

function Horse() {

    var self;

    self = assets["horse"];
    scene.add(self.mesh);

    self.startMoving = function() {
        self.animation.isPlaying = true;
    };

    self.stopMoving = function() {
        self.animation.isPlaying = false;
    };

    return self;
}

function Box(xidth, yidth, zidth) {
    var self = this;

    var geometry = new THREE.BoxGeometry(xidth, yidth, zidth);
    var material = new THREE.MeshBasicMaterial({
        color: 0x666666,
        opacity: 0.4,
        transparent: true
    });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    self.geometry = geometry;
    self.cube = cube;
}

Solution

  • your error seems to be in this line

    camera = THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
    

    Try putting a new before the THREE...

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);