为什么 THREE.js LineGeometry 不适用于正交相机？

Question

我正在从事一个使用 three.js 的项目，并且我正在使用正交相机。我试过使用外部 MeshLine 包和内置的 THREE.LineGeometry。 MeshLine 有一个尚未修复的正交相机的已知问题，而这个 THREE.LineGeometry（我专注于尝试开始工作）在我使用正交相机时似乎也有问题。线条有点像它的形状，但它和整个视口一样宽，我不确定它为什么这样做或者我是否可以用属性.

修复它

我正在寻找我列出的其中一种线型的解决方案或 three.js 的任何其他可用的二维线解决方案。

这是一张 THREE.LineGeometry 的图像，应该只是一条对角线。那些灰色箭头是我项目的一部分，应该在那里（我担心的是这条线很大，目前会穿过它们）。

这是我的代码：

        var lineGeometry = new LineGeometry();
        lineGeometry.setPositions([0,0,0,1,0,1,2,0,2,3,0,3]);
        lineGeometry.setColors([0,0,255,0,0,255,0,0,255,0,0,255]);
        console.log(lineGeometry)
        var lineMaterial = new LineMaterial({
            color: 0xffffff,
            vertexColors: true,
            dashed: false,
            lineWidth: 1,
        });
        var myLine = new Line2(lineGeometry, lineMaterial);
        myLine.computeLineDistances();
        this.Scene.add(myLine);

Answer 1

在 three.js 中使用 LineGeometry 时，请确保在更新循环或 window 调整大小时也为线条 material 着色器设置视口大小。

myLineMaterial.resolution.set(window.clientWidth, window.clientHeight);

为什么 THREE.js LineGeometry 不适用于正交相机？

Why doesn't THREE.js LineGeometry work with orthographic camera?

three.js

rendering

line

viewport

orthographic