2

If I take the Three.js canvas_lines demo and replace the perspective camera with an orthographic one:

-    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
+    camera = new THREE.OrthographicCamera(-window.innerWidth/2, window.innerWidth/2, -window.innerHeight/2, window.innerHeight/2, -100, 10000);

it causes the particles to no longer render, though the lines show up. Is this a bug in Three.js or in my understanding of orthographic projections?

Image of the particles before the change: enter image description here

And after the switch to OrthographicCamera: enter image description here (notice the particles missing and lines terminating in empty space)

Adam Finley
  • 1,550
  • 1
  • 16
  • 28
JDS
  • 251
  • 1
  • 4
  • 12
  • I am also getting this problem with Particles not showing with that camera. Did you get anywhere with this? – noShowP Nov 01 '12 at 12:56

1 Answers1

1

The "missing" particles are simply being culled because they do not lay between the camera's near and far zPlanes.

Firstly, the nearPlane on the OrthographicCamera is not properly set. It's sort of tricky, but the z values for the projection matrix have to be >0. This is because they are specified as "distance in front of camera." So, first change:

    camera = new THREE.OrthographicCamera(-window.innerWidth/2, window.innerWidth/2, -window.innerHeight/2, window.innerHeight/2, 1, 10000);

More importantly, the camera should be positioned so its not in the middle of the particle cloud. I just moved it back like this:

camera.position.z = 1000;

In orthographic projections, the z position really only determines culling behavior. The scene still looks the same. Here's the output:

enter image description here

Adam Finley
  • 1,550
  • 1
  • 16
  • 28
  • Wow, blast from the past. At the time I posted this question, the particles did not render at all, so that must have been a bug in Three.js that has subsequently been fixed. Accepting this anyway, since it seems helpful to answer a similar quesition that people might have. – JDS Jul 16 '15 at 19:57
  • You have to set the orthographic camera parameters correctly. See http://stackoverflow.com/questions/17558085/three-js-orthographic-camera/17567292#17567292. Do not confuse window pixels with world-space units. – WestLangley Jul 16 '15 at 20:00