问在正射相机中，靠近摄像机的three.js粒子显得更大。
EN

Stack Overflow用户

提问于 2015-10-13 18:22:19

回答 1查看 636关注 0票数 0

似乎用OrthographicCamera，如果一个粒子(Points)离相机更近，它就会显得更大。例如，大小相同的BoxGeometry将始终保持相同的大小，而不管它们与摄像机的距离如何。

请参阅下面的示例，其中绿色和红色立方体的大小相同，但距离相机的距离不同，这两个白色粒子也是如此：

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会使它变慢。

提前感谢

three.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-10-14 14:39:36

当使用THREE.PointsMaterial时，为了防止粒子大小随着距离的变化而衰减(改变尺寸)，设置

material.sizeAttenuation = false;

three.js r.72号

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33109906

复制

相似问题

问在正射相机中，靠近摄像机的three.js粒子显得更大。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在正射相机中，靠近摄像机的three.js粒子显得更大。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在正射相机中，靠近摄像机的three.js粒子显得更大。
EN