jeromeetienne/threex — Issue #16: Cannot read property 'projectionMatrixInverse' of null
Author: TheJVH
Created: 2012-02-07 11:51:59+00:00
State: open

I might overlook something very simple but I just can't get it done. I'm getting the error "Uncaught TypeError: Cannot read property 'projectionMatrixInverse' of null" in Three.js:67.

I'm not doing anyting very special, this is my code:
```javascript
// Set variables
var container;
var camera, scene, renderer, info, projector;
var plane;
var meshes = {};
var mouse2d;

// Initialize (create objects and cameras)
init();

animate();

function init(){
// Get the container with jQuery
var container = document.getElementById('webgl');

var width = container.offsetWidth;
var height = container.offsetHeight;

projector = new THREE.Projector();

// Create a camera
camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000 );
// Set camera position
camera.position.z = -400;
camera.position.x = 200;
camera.position.y = 350;

// Create a new scene
scene = new THREE.Scene();

// Create a mesh by creating a cube geometry with a basic red material
geometry = new THREE.CubeGeometry(50, 50, 50);
material = new THREE.MeshLambertMaterial( { color: 0xff0000 } );

var cube = new THREE.Mesh(geometry, material);
meshes['cube1'] = cube;

// Add a plane to the scene
plane = new THREE.Mesh(
new THREE.PlaneGeometry(400, 200, 10, 10),
new THREE.MeshLambertMaterial( { color: 0xCCCCCC, shading: THREE.SmoothShading} )
);
plane.position.y = -50;
plane.rotation.x = radianDegree(270);
plane.overdraw = false;
meshes['plane1'] = plane;

// Add light to the scene
var light = new THREE.SpotLight();
light.position.set( 170, 330, -160 );

// Add shadows to the scene
light.castShadow = true;
cube.castShadow = true;
cube.receiveShadow = true;
plane.receiveShadow = true;
plane.castShadow = true;

// Add all the objects, lights and camera to the scene
scene.add(light);
scene.add(cube);
scene.add(plane);
scene.add(camera);

// Make the camera look at the scene
camera.lookAt(scene.position);

// Create the renderer
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.shadowCameraFov = 50;
renderer.shadowMapWidth = 1024;
renderer.shadowMapHeight = 1024;
renderer.setSize(width, height);
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
container.appendChild(renderer.domElement);
}

function animate(){
// Render the 3D scene
render();
requestAnimationFrame(animate);
}

function render() {
// Rotate the cube
meshes['cube1'].rotation.y += 0.02;
meshes['cube1'].addEventListener('click', function(object3d){
alert('clicked!');
});
document.getElementById("info").innerHTML = "info";

renderer.render( scene, camera );
}

function radianDegree(degree){
return degree * (Math.PI/180);
}
```

Am I doing something weird or do I truly found a bug?