CODEWITHSUNDEEP
three.js
Tianyu Liu
Tianyu Liu

Reputation: 15

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

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

Upvotes: 0

Views: 702

Answers (1)

WestLangley
WestLangley

Reputation: 104783

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

Upvotes: 1

Related Questions