three.js Particles closer to camera appears larger in Orthographic Camera

Question

It seems that with OrthographicCamera, if a particle (Points) is closer to the camera it will just appear to be larger. While, for example, BoxGeometrys with same size will always be in the same size, regardless of their distances to the camera.

See the sample below, where the green & red cubes have the same size but different distances to camera, so do the two white particles:

var container, camera, controls, scene, renderer;
init();
animate();

function init() {
  var container = document.getElementById('container');

  camera =
    new THREE.OrthographicCamera(-window.innerWidth / 2,
      window.innerWidth / 2, -window.innerHeight / 2,
      window.innerHeight / 2, 1, 400);
  camera.position.z = 200;

  controls = new THREE.OrthographicTrackballControls(camera);
  controls.addEventListener('change', render);

  scene = new THREE.Scene();
  var light = new THREE.DirectionalLight()
  light.position.set(1, 5, 10)
  scene.add(light);
  var light = new THREE.DirectionalLight(0xaaaaaa)
  light.position.set(-10, -1, -5)
  scene.add(light);
  var light = new THREE.AmbientLight(0x555555)
  scene.add(light);

  var pGeo = new THREE.Geometry()
  var pVec1 = new THREE.Vector3
  var pVec2 = new THREE.Vector3
  var a = 80
  pGeo.vertices.push(pVec1.fromArray([-a, -a, -a]));
  pGeo.vertices.push(pVec2.fromArray([a, a, a]));
  scene.add(new THREE.Points(pGeo, new THREE.PointsMaterial({
    size: 80
  })))

  var cGeo = new THREE.BoxGeometry(80, 80, 80);
  var MPG1 = new THREE.MeshPhongMaterial({
    color: 0xff0000
  });
  var cMesh1 = new THREE.Mesh(cGeo, MPG1);
  cMesh1.position.set(a, -a, -a);
  cMesh1.updateMatrix();
  scene.add(cMesh1);
  var MPG2 = new THREE.MeshPhongMaterial({
    color: 0x00ff00
  });
  var cMesh2 = new THREE.Mesh(cGeo, MPG2);
  cMesh2.position.set(-a, a, a);
  cMesh2.updateMatrix();
  scene.add(cMesh2);

  // renderer
  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild(renderer.domElement);
  renderer.render(scene, camera)
  render()
}

function animate() {
  requestAnimationFrame(animate);
  controls.update();
}

function render() {
  renderer.render(scene, camera);
}

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrthographicTrackballControls.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Particle_Orthographic</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>

<body>
  <div id="container"></div>

</body>

</html>

I want to know, whether there is something I missed that can make particles behave in the same way as other Geometry with OrthographicCamera.

Because I am trying to visualise some aluminum matrix, OrthographicCamera is quite necessary to demonstrate the uniform crystal structure. Also the matrix would vary from 4^3 to 100^3 in volume (and number of aluminum atoms), so the scene will sort of keep changing size, and other Geometry will make it very slow.

Thanks in advance

Read http://stackoverflow.com/questions/17558085/three-js-orthographic-camera/17567292#17567292 so you instantiate your orthographic camera with the proper units. Try `PointsMaterial.sizeAttenuation = false;` — WestLangley, Oct 13 '15 at 19:24
@WestLangley Thank you! `sizeAttenuation` works! Sorry didn't read the API carefully. But then I just got another question: the space between particles would get zoomed but not their size (even `setZoom`), different to other `Geometry`. Is this the nature of "cheap" `PointsMaterial`? Though I can workaround it with dynamically changing particle size now with `sizeAttenuation: false`. And would you mind add your comment as answer as it is the answer. — Tianyu Liu, Oct 14 '15 at 04:50
@WestLangley but in `PerspectiveCamera` zooming on particles works fine (with `TrackballControls`). — Tianyu Liu, Oct 14 '15 at 05:37
Sorry, I do not understand your comments. Please post a new question if you need additional help. — WestLangley, Oct 14 '15 at 14:41

score 1 · Accepted Answer · answered Oct 14 '15 at 14:39

1

When using THREE.PointsMaterial, to prevent the particle size from attenuating (changing size) with distance from the camera, set

material.sizeAttenuation = false;

three.js r.72

answered Oct 14 '15 at 14:39

WestLangley

102,557
10
276
276

three.js Particles closer to camera appears larger in Orthographic Camera

1 Answers1