camera is not an instance of THREE.Camera

I am having a problem with the PerspectiveCamera.

Using the default scene in blender I exported it out using the three.js exporter. I included the camera amongst all the other objects and materials etc.

I have been building a JSON file - using it as a namespace (called gl) to set up future projects. It has a render function, a init function and update function. The init functions checks for browser compatibility and ensures that all the "libraries" (for lack of a better term) exist. Then it sets up webgl renderer and loads the JSON scene. It's similar to the load geometries example, except without all the different loaders. The camera variable is assigned to the currentCamera in the scene.

gl.camera = scene.currentCamera;

According to google chome. The problem is in the render function.

"render" : function () {
    "use strict";
    gl.renderer.render(gl.scene.scene, gl.camera);
}

Google prints the message THREE.WebGLRenderer.render: camera is not an instance of THREE.Camera. Using the watch expression the camera: THREE.PerspectiveCamera.

Why is the happening? doesn't PerspectiveCamera inherit THREE.Camera?

Also I can access the .updateProjectionMatrix() for some reason.

[mrdoob]

As stated in the guidelines, help requests should be done in stackoverflow. This board is for bugs or feature requests.

[roboleary]

Hi - I realize this is closed, and that it wasn't suitable in the first place - but since the original poster doesn't seem to have followed this up on StackOverflow, and a search for this problem only really returns this page, I thought it might be worth recording the solution here.

I got this same mysterious problem - and even debugging the object being passed to the render function showed it was a PerspectiveCamera. However, checking whether it was an instance of THREE.Camera showed it wasn't! Black magic!

In fact, the cause was including two copies of three.js in the page - presumably resulting in a new copy of THREE.Camera being compared to an object created using the old copy of THREE.Camera. So the existing PerspectiveCamera instance indeed isn't descending from THREE.Camera, because THREE.Camera has been replaced.

Remove the second include, and the problem is resolved.

[mrdoob]

Thanks for sharing that. I'll address it.

[callmejerry]

Hey roboleary, I know this isn't the place to ask this question, but since you were here (over a year ago, heh) I was wondering if you could explain your solution here? I'm having these issues right at the moment, and I don't understand your solution. Where can I find this second include to remove?

[roboleary]

Hey!

Your second include should be either directly in your HTML file, or if you're using require.js or some other dependency loader you may have a declaration of three.js as a dependency somewhere - which (depending on the library) may result in a second include. You might try checking the Network tab in Chrome with the cache disabled to see if you've got two requests going out for three.js.

Best of luck!
/R

[callmejerry]

Alright. Thank you very much!