2

I set position and fov of my perspective camera manually in THREE.JS. It behaves as expected. However, once I try to interact with the scene later on, through the TrackBall Controls, it just displays a black screen, no errors.

JS Fiddle

Relevant code:

var bbox = new THREE.Box3().setFromObject(scene);
var center = bbox.getCenter();
var size = bbox.getSize();

// update some controls properties
controls.target.set(center.x, center.y, center.z);

// position the camera  on the y axis
camera.position.set(center.x, center.y - size.y, center.z);

// fit FOV
var dist = size.y / 2;
var fov = 2 * Math.atan( size.z / ( 2 * dist ) ) * ( 180 / Math.PI );

camera.fov = fov;

camera.updateProjectionMatrix();

Which step am I missing in order to be able to then interact properly with the scene

Thanks

==== EDITS

Working fiddle based on accepted answer: Fiddle

Nicolas
  • 2,191
  • 3
  • 29
  • 49

1 Answers1

2

I think that it is not possible to correctly project a case when the camera "up" position is parallel to the vector defined by the camera position and target. The camera up position should specify how to orient the view in a plane orthogonal to the vector from camera position to the target but if the component of camera.up along that plane is zero it cannot work. In your code:

  • the camera "up" position is the default (0,1,0)
  • the vector from camera position to camera target is (0,size.y,0)

The simplest fix is probably to specify a different camera "up", i.e.

camera.up = new THREE.Vector3(0,0,1.);

or any other vector not parallel to the y direction.

Franz
  • 534
  • 3
  • 8