Three.js

Question

关于精灵的 z 深度，r70+ 似乎有些问题。

这里有一个 jsfiddle 与 r69 完美搭配。

这里是一样的jsfiddle 除了使用 r71。你可以看到现在当场景旋转时，精灵的深度并不总是正确显示。有一半时间它们以错误的 z 深度旋转到视图中。

这是一个错误还是我需要添加但我错过的新内容？

我已经尝试了以下常用命令的所有变体，似乎没有任何东西像以前那样有效。

var shaderMaterial = new THREE.ShaderMaterial({

    ...
    depthTest:      false,
    depthWrite:      false,
    transparent:    true
});

particleSystem.sortParticles = true;

我知道新的 renderDepth，但该解决方案似乎不相关，也没有解释为什么它会破坏以前的行为。我们现在不需要为所有摄像机角度不断手动更新 renderDepths 了吗？

Answer 1

PointCloud.sortParticles 已在 three.js r70 中删除；参见 this commit。

在您的原始示例（不透明）中，您可以通过为 material:

启用深度测试来获得所需的行为

var shaderMaterial = new THREE.ShaderMaterial({

    ...
    depthTest: true
});

在您更新的示例（具有透明度）中，有必要自己对 three.js r70 中的粒子进行排序。

请注意，在渲染 THREE.Sprite 对象时，three.js 仍会处理 z 排序。这可能值得研究。

Three.js - 在 r70+ 中向后渲染的精灵深度

Three.js - sprite depths rendering backwards in r70+

javascript