Question

似乎使用OrthographicCamera，如果粒子（Points）离相机更近，它看起来会更大。例如，相同大小的BoxGeometry总是大小相同，无论它们与相机的距离如何。

参见下面的示例，其中绿色＆amp;红色立方体具有相同的尺寸，但与相机的距离不同，两个白色颗粒也是如此：

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>

我想知道，我是否遗漏了一些可以使粒子的行为与其他Geometry与OrthographicCamera相同的行为。

因为我试图想象一些铝基质，OrthographicCamera是非常必要的，以证明均匀的晶体结构。此外，矩阵的体积（和铝原子数）也会从4 ^ 3到100 ^ 3不等，因此scene会改变大小，而其他Geometry会使它变得非常慢。

提前致谢

Answer 1

使用THREE.PointsMaterial时，为了防止粒径随着距相机的距离而衰减（改变大小），请设置

material.sizeAttenuation = false;

three.js r.72

three.js正交相机中靠近相机的粒子看起来更大

1 个答案: