Three.js 画布粒子不使用 OrthographicCamera 渲染答案

【问题标题】：Three.js canvas particles don't render with OrthographicCameraThree.js 画布粒子不使用 OrthographicCamera 渲染
【发布时间】：2012-06-28 17:39:38
【问题描述】：

如果我使用 Three.js canvas_lines demo 并将透视相机替换为正交相机：

-    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);

它会导致粒子不再渲染，尽管线条出现了。这是 Three.js 中的错误还是我对正交投影的理解？

更改前的粒子图像：

切换到OrthographicCamera之后：（注意粒子丢失和在空白处终止的线条）

【问题讨论】：

我也遇到了这个问题，即那个相机没有显示粒子。你有什么收获吗？

标签： canvas three.js particles orthographic

【解决方案1】：

“丢失的”粒子只是被剔除，因为它们不在相机的近端和远端 zPlanes 之间。

首先，OrthographicCamera 上的 nearPlane 设置不正确。这有点棘手，但投影矩阵的 z 值必须 > 0。这是因为它们被指定为“相机前面的距离”。所以，首先改变：

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

更重要的是，相机的位置应使其不在粒子云的中间。我只是像这样把它移回来：

camera.position.z = 1000;

在正交投影中，z 位置实际上只决定剔除行为。场景看起来还是一样的。这是输出：

【讨论】：

哇，过去的爆炸。在我发布这个问题的时候，粒子根本没有渲染，所以这一定是 Three.js 中的一个错误，后来被修复了。无论如何都接受这一点，因为回答人们可能遇到的类似问题似乎很有帮助。
您必须正确设置正交相机参数。见stackoverflow.com/questions/17558085/…。不要将窗口像素与世界空间单位混淆。